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’标签进行删除操作,以解决每次异步请求时数据无法正常显示问题。
这个方法可能不是最好的解决方法,但学习成本小,能用最少的时间去解决问题。