关于如何将从服务器接收的json数据动态显示在前端页面上的问题

首先你要学会如何向后端发送请求和接收数据，然后就可以试着将接收的数据显示在前端页面上。

现在，我们在本地上写一个json文件：

  [
    {
      "name": "xxl",
      "age": 20,
      "gender": "男",
      "work":"学生"
    },
    {
      "name": "GH",
      "age": 19,
      "gender":"男",
      "work":"教师"
    },
    {
      "name": "ZZJ",
      "age": 18,
      "gender":"女",
      "work":"程序员"
    }
  ]

这是一个长度为3的json数组，如果不懂json的数据类型可以先去了解一下json。

然后我们在前端页面上先写一个表格：

<div>
    <table id="box" class="tab">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>职业</td>
        </tr>
    </table>
</div>

然后我就可以向本地的json文件发送请求了：（我用的是jQuery-ajax）

(function () {
        $.ajax({
            url: "test.json",//向本地的json文件发送请求
            type: "GET",
            success: function (data) {
                var i;
                var html;//用一个变量来存储json中的数据
                for (i = 0; i < data.length; i++) { //用for循环遍历数组将数据存入html变量中
                    html += `<tr>
                            <td>${data[i].name}</td>
                            <td>${data[i].age}</td>
                            <td>${data[i].gender}</td>
                            <td>${data[i].work}</td>
                            </tr>`;
                }
                document.getElementById("box").innerHTML += html;
            },
            error: function () {
                //请求失败之后做的事情
            }
        })
    })();

这里有几个值得注意的地方：

第一：在用for循环遍历数组存进html变量的时候，必须用 ` ` 这个符号将要循环存入html变量的代码引用起来，否则存入html变量的只是一长串字符而已。

第二：用data[i].属性去获取json数据中的值得时候，必须先用{}将data[i].属性括起来，然后在前面加一个$符号，这样才能去获取json数据中的值，否则存进html中的也是字符而已。

 

然后我们打开浏览器查看显示效果：

这样就实现了前端页面动态显示从后台接收的数据了。