Question

我有这个php / json文件，我称之为users-json.php。

<?php
include_once('../functions.php');
if (!empty($_GET['id'])) {
$GetID = $_GET['id'];
$query = "SELECT Username, Firstname  WHERE UserID = :ID";
$stmt = $db->prepare($query);
$stmt->execute(array(':ID' => $GetID));
} else {
$query = "SELECT Username, Firstname FROM users";   
$stmt = $db->prepare($query);
$stmt->execute();
}
$userData = array();
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){

      $userData[] = $row;
}
//udskriv bruger data som JSON
echo json_encode($userData);
?>

Json输出：

[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]

我希望它使用jquery在这样的列表中显示数据。

+----+----------+-----------+----------+
| id | username | firstname | lastname |
+----+----------+-----------+----------+

到目前为止，我已经尝试了这个，但似乎没有用。

Answer 1

您可以使用php和javascript

<强>使用Javascript / JQuery的

获得$userData后，您需要使用$.parseJSON();将json解析为对象，您必须使用JQuery。因为您的JSON是php变量，所以需要将其更改为javascript变量。

<?php
 $userdata = '[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]' 
?>

你的javascript会是这样的，请注意，你必须使用JQuery Libaray来使这个东西工作

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  var data = '<?php echo $userdata ?>';
    var json = $.parseJSON(data);
        var html= "";

     for(i=0,no=1;i<Object.keys(json).length;i++){
     html+='<tr><td>'+json[i].Username+'</td><td>'+json[i].Firstname+'</td></tr>';
     }
    $('#data').html(html);
    </script>

和你的HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<style type="text/css">
   table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
  }
  </style>
<body>
<table border="1">
<thead>
  <tr>
    <td>
    Username
    </td>
    <td>
    FIrstname
    </td>
  </tr>
  </thead>
  <tbody id="data">  
  </tbody>
</table>
</body>
</html>

<强>摘要

<?php
     $userdata = '[{"Username":"Admin","Firstname":""},{"Username":"Bruger","Firstname":"Ole"}]'
?>
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<style type="text/css">
       table {
        border-collapse: collapse;
    }

    table, td, th {
        border: 1px solid black;
      }
      </style>
<table border>
  <tr>
    <td>
    Username
    </td>
    <td>
    FIrstname
    </td>
  </tr>
  <tbody id="data">  
  </tbody>
</table>
</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  var data = '<?php echo $userdata ?>';
    var json = $.parseJSON(data);
        var html= "";

     for(i=0,no=1;i<Object.keys(json).length;i++){
     html+='<tr><td>'+json[i].Username+'</td><td>'+json[i].Firstname+'</td></tr>';
     }
    $('#data').html(html);
    </script>
</html>

Answer 2

这使得它对我有用，谢谢你的回答它给了我这么多的anwsers

    <script>
        $(document).ready(function() {
          $.getJSON("http://localhost/NewSite/php-pages/User-json.php", function(data) {
         var json = data;
         for(i=0,no=1;i<Object.keys(json).length;i++){
         $('UserTable').append('<tr><td>'+json[i].Username+'</td><td>'+json[i].Firstname+'</td></tr>');
         }
         });
     });
    </script>

    <body>
    <table id="UserTable"></table>
    </body>

使用JQuery将JSON数据获取到html中

2 个答案: