1、解析接收到的json数据

• 导入jQuery包。

• 部分前端代码（仅供参考）

  <form>
    id:<input type="text" id="stu_id" value="">
    classid:<input type="text" id="stu_classid" value="">
    name:<input type="text" id="stu_name" value="">
    sex:<input type="text" id="stu_sex" value="">
    college:<input type="text" id="stu_college" value="">
    specianlty:<input type="text" id="stu_specianlty" value="">
  </form>
  <button onclick="select()" id="submit" value="查询">查询</button>
  

• 通过ajax连接接口并接收到数据

  function select() {
            var params = {
                stu_id:document.getElementById("stu_id").value,
                stu_classid:document.getElementById("stu_classid").value,
                stu_name:document.getElementById("stu_name").value,
                stu_sex:document.getElementById("stu_sex").value,
                stu_college:document.getElementById("stu_college").value,
                stu_specianlty:document.getElementById("stu_specianlty").value
            }
            $.ajax({
                url:"/Student/selectStudentInfo",
                type:"POST",
                data:{
                    stu_id:params.stu_id,
                    stu_classid:params.stu_classid,
                    stu_name:params.stu_name,
                    stu_sex:params.stu_sex,
                    stu_college:params.stu_college,
                    stu_specianlty:params.stu_specianlty
                },
                dataType:"json",
                success:function (res) {
                    console.log(res);
                }
            })
        }
  

• 接口概述：
  • 请求地址：/Student/selectStudentInfo

  • 请求方式：POST/GET

  • 请求参数：

  字段	说明	类型	备注	是否必填
  stu_id	学号	String	--	否
  stu_classid	班级	String	--	否
  stu_name	姓名	String	--	否
  stu_sex	性别	String	--	否
  stu_college	学院	String	--	否
  stu_specianlty	专业	String	--	否

  • 返回参数：

  字段	说明	类型	备注	是否必填
  code	接口状态码	Number	成功：1 失败：0 登录失效：-1	是
  message	接口信息	String	成功：success 失败：提示信息	是
  data	返回学生信息	Object	--	是

• 打开控制台就可以看到返回的json数据

  {
  code:1,
  message:"success",
  data:[
    {stu_id: "****", stu_password: "****", stu_name: "***", stu_classid: "****", stu_sex: "**", …},
    {stu_id: "****", stu_password: "****", stu_name: "***", stu_classid: "****", stu_sex: "**", …},
    .....]
  }
  

2、将数据规格化放入表格中

• 部分前端代码

  <table class="table table-striped" id="student">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>班级</th>
        <th>学院</th>
        <th>专业</th>
    </tr>
  </table>
  

• Js代码

  function select() {
            var params = {
                stu_id:document.getElementById("stu_id").value,
                stu_classid:document.getElementById("stu_classid").value,
                stu_name:document.getElementById("stu_name").value,
                stu_sex:document.getElementById("stu_sex").value,
                stu_college:document.getElementById("stu_college").value,
                stu_specianlty:document.getElementById("stu_specianlty").value
            };
            .ajax({
                url:"/Student/selectStudentInfo",
                type:"POST",
                data:{
                    stu_id:params.stu_id,
                    stu_classid:params.stu_classid,
                    stu_name:params.stu_name,
                    stu_sex:params.stu_sex,
                    stu_college:params.stu_college,
                    stu_specianlty:params.stu_specianlty
                },
                dataType:"json",
                success:function (res) {
                    console.log(res);
                    var html = "";                         for (var num in res.data) {
                        html += '<tr id="info"><td>' + res.data[num].stu_id + '</td>' +
                            '<td>' + res.data[num].stu_name + '</td>' +
                            '<td>' + res.data[num].stu_classid + '</td>' +
                            '<td>' + res.data[num].stu_college + '</td>' +
                            '<td>' + res.data[num].stu_specianlty + '</td></tr>';
                    }("#student").append(html);
                }
            })
        }
  

  思路：在后端接收到ajax传递的值并发送相对应的结果json值时，此时得到的结果就被放到 “res” 变量中。定义一个变量承接之后我们解析到前端页面的html代码（这里我设定的变量名为 “html” ）。通过一个for循环，将返回json中data数组进行循环，每进行一次循环，将我们需要的值找到并放到特定的标签中，最后将整个html代码添加到特定的部分中，这里根据id去寻找位置。

• 运行之后的截图

  

• 缺点：当我们多次进行Ajax异步请求操作时，我们得到新的数据会添加到上一次请求的数据之后，这个列表不会刷新，而只是将新数据添加到后面。

3、解决方法（这不是唯一解决方法）

• 解决思路：我们可以在每一次异步请求时对原有的数据进行删除操作，这样即可解决上述问题。

• Js代码

  function select() {
            var params = {
                stu_id:document.getElementById("stu_id").value,
                stu_classid:document.getElementById("stu_classid").value,
                stu_name:document.getElementById("stu_name").value,
                stu_sex:document.getElementById("stu_sex").value,
                stu_college:document.getElementById("stu_college").value,
                stu_specianlty:document.getElementById("stu_specianlty").value
            };
            .ajax({
                url:"/Student/selectStudentInfo",
                type:"POST",
                data:{
                    stu_id:params.stu_id,
                    stu_classid:params.stu_classid,
                    stu_name:params.stu_name,
                    stu_sex:params.stu_sex,
                    stu_college:params.stu_college,
                    stu_specianlty:params.stu_specianlty
                },
                dataType:"json",
                success:function (res) {
                    console.log(res);
                    var html = "";
                    for (var num in res.data) {
                        html += '<tr id="info"><td>' + res.data[num].stu_id + '</td>' +
                            '<td>' + res.data[num].stu_name + '</td>' +
                            '<td>' + res.data[num].stu_classid + '</td>' +
                            '<td>' + res.data[num].stu_college + '</td>' +
                            '<td>' + res.data[num].stu_specianlty + '</td></tr>';
                    }("tr").remove("#info");
                    $("#student").append(html);
                }
            })
        }
  

  解释：其中代码："("tr").remove("#info");” 的意思是将 id名为 ‘info’ 的 ‘tr'标签进行删除操作，以解决每次异步请求时数据无法正常显示问题。 解释：其中代码：“$("tr").remove("#info");” 的意思是将 id名为 ‘info’ 的 ‘tr'标签进行删除操作，以解决每次异步请求时数据无法正常显示问题。

这个方法可能不是最好的解决方法，但学习成本小，能用最少的时间去解决问题。