【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+"");
})
取值的方式主要有两种
 
   
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" %>

  
    

    

    

  

  
      
 
   
  
"+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