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

Question

我有一个从 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>

Answer 1

您可以使用 fetch api 从 php 文件加载数据并在屏幕上显示为表格。

例子。

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

HTML:

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

使用 jsonplaceholder api 的工作示例。

(async function() {
  try {
    let tableEle = document.getElementById("content");
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    let body = await response.json();
    let rows = "";
    for (const item of body) {
      rows += `<tr>
        <td>${item.id}</td>
        <td>${item.title}</td>
        <td>${item.userId}</td>
      </tr>`;
    }
    tableEle.querySelector("tbody").innerHTML = rows;
  } catch (error) {
    console.log(error);
  }
})();

#content {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  #content td,
  #customers th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  #content tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  #content tr:hover {
    background-color: #ddd;
  }

  #content th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4caf50;
    color: white;
  }

<div class="container">
      <div class="row">
        <div class="table-responsive">
          <table class="table1 table" id="content">
            <thead>
              <tr>
                <th>ID</th>
                <th>Title</th>
                <th>UserID</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>