使用JSON和显示数据 [英] use JSON and Display data

问题描述

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

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

我在json下面找到包含列表中所有人的所有这些数据的数组：

<类= 片段码-HTML语言HTML的prettyprint-越权 预> < phpsession_start（）; $服务器名= XXXXX; $ connectioninfo =阵列（ 'Database'=>'xxxxxxxxxxxxx'）; $ conn = sqlsrv_connect（$ servername，$ connectioninfo）; if（！$ conn）{echo'connection failure';死亡（的print_r（sqlsrv_errors（），TRUE））;} $ Q1 = 由pointsRewarded降序选择顶部10 *从pointsBadgeTableWHERE WeekNumber ='week51'order; $语句= sqlsrv_query（$康恩，$ Q1）;如果（$语句==假）{回声'错误检索信息！ <峰; br />; die（print_r（sqlsrv_errors（），TRUE））;} do {while（$ row = sqlsrv_fetch_array（$ stmt，SQLSRV_FETCH_ASSOC））{$ result [] = $ row; （sqlsrv_next_result（$ stmt））; sqlsrv_free_stmt（$ stmt）; sqlsrv_close（$ conn）;} //首先关闭connnectiokn //设置内容类型为jsonheader（'Content-Type：application / json'）; //将json对象回显到browserecho json_encode（$ result）;？>如查询中所见，它为所有top10提取JSON，其名称可以在列表中看到。

$ b

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

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

请帮助我。

解决方案

也许您应该考虑使用AJAX来获取更多数据。当您打印出名单时，请执行以下操作：

 <？php 
 $ sql =SELECT top 10雇用eeID，EmployeeName，pointsRe warded 
 FROM pointsBadgeTable 
 WHERE WeekNumber ='week51'
 ORDER BY pointsRewarded desc; 
 
如果（（$语句= sqlsrv_query（$康恩，$ Q1））！= FALSE）{
做{
，而（$行= sqlsrv_fetch_array（$语句，SQLSRV_FETCH_ASSOC） ）{
 $ result [] = $ row; 
} 
} while（sqlsrv_next_result（$ stmt））; 
 
 foreach（$ result as $ row）{
 echo'< li>< mark data-id =''。$ row ['EmployeeID']。'>' 。 $行[ EmployeeName。 >< /标记><小>。$行[ pointsRe抵御]< /小>< /立GT;; 
} 
} else {
 // sql错误。 
} 
 
？> 
  

然后在您的JS中：

<$ p $ （'click'，function（）{
var e = $（this）;
$ .ajax（{
url：./requestuserdata.php，//上面的脚本稍微调整了
类型：POST，
data：{id：e.find（'mark'）。data 'id'）}，
成功：函数（数据）{
$（'＃popup'）。fadeIn（）;
$（'＃popup-name'）。text（'名称：'+ data.EmployeeName）;
// etc ..
}，
错误：function（）{
alert（'失败，可能的脚本不存在'） ;
}
}）;
}）;

然后在你的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; 
 //并将其转换为JSON，就像上面的脚本一样，因此您的JavaScript将完成剩下的工作。 
 die（json_encode（$ result））; 
} else {
 header（$ _ SERVER ['SERVER_PROTOCOL']。'500 Internal Server Error'，true，500）; 
} 
  

I have a popup which is displayed on clicking a name in this leaderboard :https://jsfiddle.net/pvwvdgLn/1/

There are various fields in the popup like :Name,Email,Date of birth etc which I want to display for the respective person whose name is clicked by the user.

I have below json which is fetching me the array which contains all these data of all the people in the list :

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

the html and JS related to the popup is here : https://jsfiddle.net/woef5mn6/

How can I display the respective data in the popup from the JSON only for the person whose name is clicked ?

please help me.

解决方案

Perhaps you should consider using AJAX to fetch additional data. When you print out the list of names do the following:

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

?>

Then in your 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');
    }
  });
});

Then in your PHP file requestuserdata.php must contain the following code:

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和显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！