jquery ajax后台向前台传list 前台用jquery $.each遍历list

前后端交互与数据遍历

最新推荐文章于 2018-09-20 15:33:58 发布

weixin_34327761

最新推荐文章于 2018-09-20 15:33:58 发布

阅读量117

点赞数

文章标签： javascript json ViewUI

本文详细介绍了如何在前端通过Ajax实现与后端的交互，接收并遍历JSON数据，展示具体操作步骤及示例代码。

下边是两种前台接收并遍历list

$.ajax({  
    type: 'post',  
    url: xxx.action',  
    dataType: 'text',  
    success: function(data){              
        var dataObj=eval("("+data+")");     
        for(var i=0;i<dataObj.length;i++){      
            alert(dataObj[i].id+" "+dataObj[i].name);     
        }  
                      
        var jsonObj=eval("("+data+")");  
        $.each(jsonObj, function (i, item) {  
            alert(item.id + ","  + item.name);  
        });  
    },  
    error: function(text) {}  
});

下边是后台接收并遍历list

HttpServletResponse res = ServletActionContext.getResponse();  
res.reset();  
res.setContentType("text/html;charset=utf-8");  
PrintWriter pw = res.getWriter();  
          
xxx.setId(1);  
xxx.setName("黑色头发");  
list.add(xxx);  
xxx.setId(2);  
xxx.setName("紫色头发");  
list.add(xxx);  
          
String json = JSONArray.fromObject(list).toString();   
          
pw.print(json);  
pw.flush();  
pw.close();