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

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

javascript php jquery json

Javascript 使用JQuery将JSON数据获取到html中,javascript,php,jquery,json,Javascript,Php,Jquery,Json,我有一个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' =&

我有一个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);
?>

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

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

到目前为止，我已经自己尝试过了，但似乎不起作用。

您可以使用php和javascript

Javascript/JQuery

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

获取

$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>


var数据=“”；
var json=$.parseJSON（数据）；
var html=“”；
对于（i=0，no=1；i您可以与php和javascript一起使用
Javascript/JQuery
<?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>

获取$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>


var数据=“”；
var json=$.parseJSON（数据）；
var html=“”；
因为（i=0，no=1；i这对我来说很有用，谢谢你的回答，它给了我很多答案
    <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>


$（文档）.ready（函数（）{
$.getJSON（“http://localhost/NewSite/php-pages/User-json.php，函数（数据）{
var json=数据；
因为（i=0，no=1；i这对我来说很有用，谢谢你的回答，它给了我很多答案
    <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>


$（文档）.ready（函数（）{
$.getJSON（“http://localhost/NewSite/php-pages/User-json.php，函数（数据）{
var json=数据；
对于（i=0，no=1；iit太宽泛了…你想实现什么..模态还是列表？我想我需要列表函数来工作，以便更好地理解它是如何工作的。我试着阅读以下内容：-但首先我想我需要列表函数来处理php代码，我得到了类似于[code][{“Username”这样的回音：“Admin”，“Firstname”：“}，{“Username”：“User”，“Firstname”：“Ole”}][/code]你是说“list”吗类似于表格格式？是的，类似于表格格式…所以我能更好地理解json，以及如何使用数组等…它太宽了…你想实现什么…模式还是列表？我想我需要使用列表函数来更好地理解它是如何工作的。我试着阅读了以下内容：-但首先我想我需要list函数来处理php代码我得到了这样的回音[code][{“Username”：“Admin”，“Firstname”：“}，{“Username”：“User”，“Firstname”：“Ole”}][/code]你是说“list”吗像表格格式吗？是的，像表格格式……这样我就能更好地理解json，以及如何使用数组等……那么如何从中显示我想要的“？[id][username][firstname][lastname][id][username][firstname][lastname][id][username][firstname][lastname]我想要javscript中的函数显示html列表/表格我已经添加了摘要所以如何从中显示我想要的内容？[id][username][firstname][lastname][id][username][firstname][lastname][id][username][firstname][lastname]我想要javscript中的函数显示html列表/表格我已经添加了摘要