Javascript 如何从PHP文件中获取JSON数据以在html文件中打印

我有一个从MySQL数据库输出JSON的PHP文件，我想将JSON输出转换成HTML文件并显示为一个表。当我按原样使用JSON输出时，它工作得很好，但我希望将该PHP文件作为URL或文件，并将结果作为HTML文件中的表

PHP代码：

<?php
$DBServer="localhost";
$DBUser="root";
$DBPass="";
$DBName="test";
$conn = new mysqli($DBServer, $DBUser, $DBPass, $DBName);
$sql='SELECT userinfo.id, name, user_id, posts FROM userinfo, user_posts WHERE userinfo.id = user_posts.user_id';



$rs=$conn->query($sql);
$data = $rs->fetch_all(MYSQLI_ASSOC);
header('Content-Type: application/json');
echo json_encode($data);



?>

HTML代码：

 <script>
       $(document).ready(function() {

      // Need to take PHP URL or file name instead of JSON data

     var data = {
        "report":  [{
            "id": "Abril",
            "name": "13",
            "user_id": "Lisboa",

        }]
      };  



      // Loop through data.report instead of data
      for (var i = 0; i < data.report.length; i++) {
        var tr = $('<tr/>');

        // Indexing into data.report for each td element
        $(tr).append("<td>" + data.report[i].id+ "</td>");
        $(tr).append("<td>" + data.report[i].name+ "</td>");
        $(tr).append("<td>" + data.report[i].user_id+ "</td>");

        $('.table1').append(tr);
      }
    });
    </script>

    <div class="container">
            <div class="row">
                <div class="table-responsive">
                    <table class="table1 table"  >
                        <thead>
                            <tr>
                            <th>ID</th>
                            <th>NAME</th>
                            <th>USER ID</th>


                             </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>

$（文档）.ready（函数（）{
//需要采用PHP URL或文件名而不是JSON数据
风险值数据={
“报告”：[{
“id”：“Abril”，
“名称”：“13”，
“用户id”：“里斯本”，
}]
};  
//循环遍历data.report而不是data
对于（var i=0；i

您可以使用

fetch

api从php文件加载数据，并在屏幕上显示为table

例如

(async function() {
  try {
    let tableEle = document.getElementById("content");
    let response = await fetch("<php file url>");
    let body = await response.json();
    let rows = "";
    for (const item of body) {
      rows += `<tr>
        <td>${item.id}</td>
        <td>${item.name}<t/d>
        <td>${item.user_id}</td>
      </tr>`;
    }
    tableEle.querySelector("tbody").innerHTML = rows;
  } catch (error) {
    console.log(error);
  }
})();

身份证件
标题
用户ID
欢迎光临，穆罕默德

既然您已经在使用jQuery，我可能会使用它们的ajax功能

$.ajax({
网址：'https://server.example.org/index.php',
键入：“GET”，
数据类型：'json'，
成功：函数（数据）{
//在这里，您可以在调用成功后添加功能。
//警报（“数据：”+数据）；
//循环遍历data.report而不是data
对于（var i=0；i
检查ajac调用，以便将数据从php加载到javascriptit，返回一个空白html页面，控制台中没有错误。user\u post是一个表名。ya。这是两个表联接的查询。user_posts是一个表，user_id是该表中的一列。没有响应返回一个空白html页，控制台中没有错误。@Mohamedash如果您试图取消对
警报（'Data:'+Data）的注释
在success函数中，并根据您的要求采用此代码示例？@mohamedash如果我不确定是否完全理解您的答案，但您可能应该取消对该部分的注释并检查数据值？从给定的示例中，我看不出php脚本是如何返回数据的。这是我的php脚本，它连接两个表并以JSON格式获取数据。
 <div class="container">
      <div class="row">
        <div class="table-responsive">
          <table class="table1 table" id="content">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>User ID</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>

$.ajax({
    url : 'https://server.example.org/index.php',
    type : 'GET',
    dataType:'json',
    success: function(data) {              
       // Here you add your functionality after the call has succeeded.
       // alert('Data: ' + data); 

       // Loop through data.report instead of data
       for (var i = 0; i < data.report.length; i++) {
         var tr = $('<tr/>');

         // Indexing into data.report for each td element
         $(tr).append("<td>" + data.report[i].Mes + "</td>");
         $(tr).append("<td>" + data.report[i].Dia + "</td>");
         $(tr).append("<td>" + data.report[i].Local + "</td>");

         $('.table1').append(tr);
      }
    },
    error: function(request, error) {
        alert("Request: " + JSON.stringify(request));
    }
});