使用jQuery集合以列表样式展示

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去寻找位置。

  • 运行之后的截图

    BtL5TS.png

  • 缺点:当我们多次进行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’标签进行删除操作,以解决每次异步请求时数据无法正常显示问题。

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇