【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】


      
User Account Information
ID UserName Birthdate Nationality

【Ajax】

总体结构如下

  • approach1 - for(i) 循环取值,dataArray[i]['key']取值
    //dataArray.length是JSONArray数组中的对象个数
    for (var i = 0; i < dataArray.length; i++) {
        var tr;
        //注意这里[tr=]不要写成[tr+=]
        tr = ""+dataArray[i]['ID']+"";
        tr += ""+dataArray[i]['username']+"";
        tr += ""+dataArray[i]['birthdate']+"";
        tr += ""+dataArray[i]['nationality']+"";
        //将语句拼接到中显示
        $("#tbl").append(""+tr+"");
    }
  • approach2 - for(i in dataArray),dataArray[i].key 取值
for(i in dataArray){
    var tr;
    tr = "
"; tr += ""; tr += ""; tr += ""; $("#tbl").append(""+tr+""); }
  • approach3 - each(JSONArray,function(index,item))
$.each(dataArray,function (index,item) {
    var tr;
    tr += "
"; tr += ""; tr += ""; tr += ""; $("#tbl").append(""+tr+""); })

取值的方式主要有两种

  1. dataArray[i].key
  2. 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" %>

  
    TableDemo

    

    

  

  
      
"+dataArray[i].ID+""+dataArray[i].username+""+dataArray[i].birthdate+""+dataArray[i].nationality+"
" + item.ID + "" + item.username + "" + item.birthdate + "" + item.nationality + "
User Account Information
ID UserName Birthdate Nationality

【参考】

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

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

你可能感兴趣的:(Java程序)