Question

我点击此排行榜中的名称时会显示一个弹出窗口：https://jsfiddle.net/pvwvdgLn/1/

弹出窗口中有各种字段：名称，电子邮件，出生日期等，我想为用户点击其名称的相应人员显示。

我在json下面是一个数组，其中包含列表中所有人的所有这些数据：

＆＃13;

<?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.

＆＃13;

与弹出窗口相关的html和JS在这里：https://jsfiddle.net/woef5mn6/

如何仅针对名称被点击的人显示JSON弹出窗口中的相应数据？

请帮帮我。

Answer 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);
}

使用JSON和显示数据

1 个答案: