zoukankan      html  css  js  c++  java
  • ajax请求数据&JSON字符串

    参考:https://blog.csdn.net/qq_39268603/article/details/80003265

    • jsp发请求

      <script>
          <%--    请求所有导师信息--%>
          $(function () {
              $.ajax({
                  url: "/showTutorsListServlet",
                  type: "post",
                  success: function (jsonArray) {
                      var jsonObj = eval(jsonArray);//json字符串转为数组
                      console.log(jsonObj);
                      showData(jsonObj);
                  },
                  error: function (msg) {
                      alert("ajax连接异常:" + msg);
                  }
              });
          });
      </script>
      

    • 从后端得到JSON字符串数据

      • 方一:可以创建相应实体,list转为JSON对象

        List<Tutor> tutorList = showTutorsListService.getTutorsByDepart(depart);
        
        //将list转换成json对象
        JSONArray jsonArray = JSONArray.fromObject(tutorList);
        
        //发送数据
        resp.getWriter().write(jsonArray.toString());
        
      • 方二:没有相应实体,也可以直接将字符串拼成JSON数组字符串,像下面那样。

      • (下面是JSON数组字符串 拼接后的结果)

        [
        {"specialty":"软件工程","sex":false,"tutorNo":"20170000","degree":"博士","birth":"2020-06-18","password":"20170000","tutorName":"root","post":"博士","phone":"155","quota":4,"surplusQuota":3,"researchField":"人工智能","depart":"计算机科学与技术学院","email":"124"}
        ,{"specialty":"计算机","sex":false,"tutorNo":"20170001","degree":"博士","birth":"2020-06-20","password":"20170001","tutorName":"root2","post":"博士","phone":"155","quota":4,"surplusQuota":4,"researchField":"人工智能","depart":"计算机科学与技术学院","email":"124"}
        ]
        
      • 浏览器控制台显示


    • jsp中数据显示表格

      <html>
          <table class="table table-striped">
              <thead>
                  <tr>
                      <th>序列</th>
                      <th>导师所属院系</th>
                      <th>学科方向</th>
                      <th>导师姓名</th>
                      <th>剩余名额</th>
                      <th>查看导师信息</th>
                      <th>申请导师</th>
              </thead>
              <tbody id="content">
              </tbody>
          </table>
      </html>
      
      <script>
          <%--数据显示(表格)--%>
      
          function showData(jsonObj) {
              var serial = 1;
              var html = "";
      
              for (var i = 0; i < jsonObj.length; i++) {//注意对象的属性值和实体类的一样
                  html += "<tr>" +
                      "<td>" + serial + "</td>" +
                      "<td>" + jsonObj[i].depart + "</td>" +
                      "<td>" + jsonObj[i].specialty + "</td>" +
                      "<td>" + jsonObj[i].tutorName + "</td>" +
                      "<td>" + jsonObj[i].surplusQuota + "</td>" +
                      "<td><input type='submit' id='checkTutorInfoBtn' value='查看详情' onclick='checkTutor("" + jsonObj[i].tutorNo + "")';></td>" +
                      // "<td><input type='submit' value='申请导师'  onclick='applyTutor("" + jsonObj[i].surplusQuota + "," + jsonObj[i].tutorNo + "," + jsonObj[i].tutorName + "")';></td>" +
                      "<td><input type='submit' value='申请导师'  onclick='applyTutor("" + jsonObj[i].surplusQuota + "","" + jsonObj[i].tutorNo + "","" + jsonObj[i].tutorName + "")';></td>" +
                      "</tr>";
      
                  ++serial;
              }
              $('#content').html(html);
          }
      </script>
      

  • 相关阅读:
    初识Activity
    贝叶斯公式由浅入深大讲解—AI基础算法入门【转】
    jz2440使用openjtag+openocd+eclipse调试【学习笔记】
    win10下搭建jz2440v3(arm s3c2440)开发及gdb调试环境【转】
    Eclipse安装zylin[转]
    Ubuntu 16.04下EasyOpenJTAG+OpenOCD的安装和使用【转】
    如何退出minicom【学习笔记】
    Python Matplotlib简易教程【转】
    anacoda的spyder在调用matplotlib的时候无法显示动画效果【学习笔记】
    Spyder如何在弹出框绘图【转】
  • 原文地址:https://www.cnblogs.com/musecho/p/13167872.html
Copyright © 2011-2022 走看看