использование JSON и отображение данных

У меня есть всплывающее окно, которое отображается при нажатии на имя в этой таблице лидеров : https://jsfiddle.net/pvwvdgLn/1/

Есть различные поля во всплывающем окне, как: имя,адрес электронной почты, Дата рождения и т.д., которые я хочу, чтобы отобразить для соответствующего лица, чье имя нажата пользователем.

У меня есть ниже json, который получает меня массив, который содержит все эти данные всех людей в списке :

<?php
session_start();
$servername = "xxxxx";
$connectioninfo = array(
    'Database' => 'xxxxxxxxxxxxx'
);
$conn = sqlsrv_connect($servername, $connectioninfo);
if (!$conn) {
    echo 'connection failure';
    die(print_r(sqlsrv_errors() , TRUE));
}

$q1 = "select top 10 *
from pointsBadgeTable
WHERE WeekNumber ='week51'
order by pointsRewarded desc";
$stmt = sqlsrv_query($conn, $q1);
if ($stmt == false) {
    echo 'error to retrieve info !! <br/>';
    die(print_r(sqlsrv_errors() , TRUE));
}
do {
    while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
        $result[] = $row;
    }
}
while (sqlsrv_next_result($stmt));
sqlsrv_free_stmt($stmt);
sqlsrv_close($conn); //Close the connnectiokn first

//Set content type to json
header('Content-Type: application/json');

//Echo a json object to the browser
echo json_encode($result);
?>

As can be seen in the query,it fetches JSON for all the top10 ,whose names can be seen in the list.

html и JS, связанные с всплывающим здесь : https://jsfiddle.net/woef5mn6/

Как я могу отобразить соответствующие данные во всплывающем окне JSON только для человека, имя которого нажато ?

пожалуйста, помогите мне.

1 ответ

  1. Возможно, вам следует использовать AJAX для получения дополнительных данных. При распечатке списка имен выполните следующие действия:

    <?php
      $sql = "SELECT top 10 Employ‌​eeID, EmployeeName, pointsRe‌​warded
              FROM pointsBadgeTable
              WHERE WeekNumber ='week51'
              ORDER BY pointsRewarded desc";
    
      if(($stmt = sqlsrv_query($conn, $q1)) != false){
        do {
          while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
            $result[] = $row;
          }
        } while (sqlsrv_next_result($stmt));
    
        foreach($result as $row){
          echo '<li><mark data-id="'.$row['EmployeeID'].'">'. $row['EmployeeName']. '></mark><small>'.$row['pointsRe‌​warded'].'</small></li>';
        }
      } else {
        // sql error.
      }
    
    ?>
    

    Тогда в вашем JS:

    $('.leaderboard li').on('click', function () {
      var e = $(this);
      $.ajax({
        url: "./requestuserdata.php", // your script above a little adjusted
        type: "POST",
        data: {id:e.find('mark').data('id')},
        success: function(data){
          $('#popup').fadeIn();
          $('#popup-name').text('Name: ' + data.EmployeeName);
          // etc ..
        },
        error: function(){
          alert('failed, possible script does not exist');
        }
      });
    });
    

    Тогда в вашем PHP файле requestuserdata.phpдолжен содержаться следующий код:

    if(isset($_POST['id']) && is_numeric($_POST['id'])){
      $q1 = "select *
             from pointsBadgeTable
             WHERE WeekNumber ='week51' AND Employ‌​eeID = '".$_POST['id']."'
             order by pointsRewarded desc";
      // and convert it to JSON like your script above so your javascript does the rest.
      die(json_encode($result));
    } else {
      header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
    }