【JavaWeb】Ajax JSON数组取数据显示到Table

【JSONArray】

[{"ID":1,"birthdate":"1989-10-14","nationality":"Australia","username":"Mia Wasikowska"},
{"ID":2,"birthdate":"1963-06-09","nationality":"USA","username":"Johnny Depp"},
{"ID":3,"birthdate":"1966-05-26","nationality":"England","username":"Helena Bonham Carter"},
{"ID":4,"birthdate":"1982-11-12","nationality":"NewYork","username":"Anne Hathaway"},
{"ID":5,"birthdate":"1969-02-05","nationality":"England","username":"Michael Sheen"},
{"ID":6,"birthdate":"1964-04-20","nationality":"USA","username":"Crispin Glover"},
{"ID":7,"birthdate":"1958-08-25","nationality":"USA","username":"Tim Burton"}]

【Table】

<body>
      <table id="tbl" align="center">

        <caption>User Account Information</caption>

          <tr>
            <th>ID</th>
            <th>UserName</th>
            <th>Birthdate</th>
            <th>Nationality</th>
          </tr>

      </table>
</body>

【Ajax】

总体结构如下

<script type="text/javascript">

      window.onload = function () {
 
          $.ajax({
              type:"post",
              url:"TableDemoServlet",
              async:true, //默认-异步（true） 同步-false
              dataType:"json",
              success:function (dataArray) {

                  //解析JSON数据dataArray，并显示到Table上
                
              },
              error:function (e) {
                  alert("错误！"+e.status);
              },
              complete:function () {
              }
          });
      }

</script>

approach1 - for(i) 循环取值，dataArray[i]['key']取值

    //dataArray.length是JSONArray数组中的对象个数
    for (var i = 0; i < dataArray.length; i++) {
        var tr;
        //注意这里[tr=]不要写成[tr+=]
        tr = "<td>"+dataArray[i]['ID']+"</td>";
        tr += "<td>"+dataArray[i]['username']+"</td>";
        tr += "<td>"+dataArray[i]['birthdate']+"</td>";
        tr += "<td>"+dataArray[i]['nationality']+"</td>";
        //将语句拼接到<table>中显示
        $("#tbl").append("<tr>"+tr+"</tr>");
    }

approach2 - for(i in dataArray)，dataArray[i].key 取值

for(i in dataArray){
    var tr;
    tr = "<td>"+dataArray[i].ID+"</td>";
    tr += "<td>"+dataArray[i].username+"</td>";
    tr += "<td>"+dataArray[i].birthdate+"</td>";
    tr += "<td>"+dataArray[i].nationality+"</td>";

    $("#tbl").append("<tr>"+tr+"</tr>");
}

approach3 - each(JSONArray，function(index，item))

$.each(dataArray,function (index,item) {
    var tr;
    tr += "<td>" + item.ID + "</td>";
    tr += "<td>" + item.username + "</td>";
    tr += "<td>" + item.birthdate + "</td>";
    tr += "<td>" + item.nationality + "</td>";

    $("#tbl").append("<tr>"+tr+"</tr>");
})

取值的方式主要有两种

dataArray[i].key
dataArray[i]['key']

【完整代码】

<%--
  Created by IntelliJ IDEA.
  User: Coraline
  Date: 2018/8/29
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>TableDemo</title>

    <script src="./scripts/jquery.min.js"></script>

    <script type="text/javascript">

      window.onload = function () {

          //解析JSONArray，并显示到Table上
          //----------------------第一种方式---------------------------------
          function approach1(dataArray){
              //dataArray.length是JSONArray数组中的对象个数
              for (var i = 0; i < dataArray.length; i++) {
                  var tr;
                  //注意这里[tr=]不要写成[tr+=]
                  tr = "<td>"+dataArray[i]['ID']+"</td>";
                  tr += "<td>"+dataArray[i]['username']+"</td>";
                  tr += "<td>"+dataArray[i]['birthdate']+"</td>";
                  tr += "<td>"+dataArray[i]['nationality']+"</td>";
                  //将语句拼接到<table>中显示
                  $("#tbl").append("<tr>"+tr+"</tr>");
              }
          }
          //-----------------------第二种方式--for-in----------------------------
          function approach2(dataArray){
              // data.data指的是数组，数组里是7个对象，i为数组的索引
              for(i in dataArray){
                  var tr;
                  tr = "<td>"+dataArray[i].ID+"</td>";
                  tr += "<td>"+dataArray[i].username+"</td>";
                  tr += "<td>"+dataArray[i].birthdate+"</td>";
                  tr += "<td>"+dataArray[i].nationality+"</td>";

                  $("#tbl").append("<tr>"+tr+"</tr>");
              }
          }
          //-----------------------第三种方式---each----------------------------
          function approach3(dataArray){
              $.each(dataArray,function (index,item) {
                  var tr;
                  tr += "<td>" + item.ID + "</td>";
                  tr += "<td>" + item.username + "</td>";
                  tr += "<td>" + item.birthdate + "</td>";
                  tr += "<td>" + item.nationality + "</td>";

                  $("#tbl").append("<tr>"+tr+"</tr>");
              })
          }

          $.ajax({
              type:"post",
              url:"TableDemoServlet",
              async:true, //默认-异步（true） 同步-false
              dataType:"json",
              success:function (dataArray) {
                  //---第一种方式---
                  // approach1(dataArray);
                  //---第二种方式--for-in---
                  // approach2(dataArray);
                  //---第三种方式---each---
                  approach3(dataArray);
              },
              error:function (e) {               
                  alert("错误！"+e.status);
              },
              complete:function () {
              }
          });
      }

    </script>

  </head>

  <body>
      <table id="tbl" align="center">
        <caption>User Account Information</caption>
          <tr>
            <th>ID</th>
            <th>UserName</th>
            <th>Birthdate</th>
            <th>Nationality</th>
          </tr>
      </table>
  </body>
</html>

【参考】

jquery如何通过ajax请求获取后台数据显示在表格上

https://blog.csdn.net/cyyy1223/article/details/78649481

【JavaWeb】Ajax JSON数组取数据显示到Table

猜你喜欢