jquery 遍历json对象和json对象数组

描述：jQuery ajax处理服务端返回的json数据，这里主要说明的是对象数据，即目标是对象。

首先是后台的处理过程。本例子为了方便采用servlet来作为服务端。

声明一个enty类.User.java代码如下：

package enty;

public class User {
    private int id;
    private String name;
    public User(){
    }
    public User(int id,String name){
        this.id = id;
        this.name = name;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    

}

EntyToJson.java的主要代码如下：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/json");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        User user1 = new User(1, "wkl");
        User user2 = new User(2, "wkl");
        User user3 = new User(3, "wkl");
        User user4 = new User(4, "wkl");
        //定义一个集合list用来存放user对象
        List<User> users = new ArrayList<User>();
        users.add(user1);
        users.add(user2);
        users.add(user3);
        users.add(user4);
        //集合要调用json对象数组JSONArray类
        JSONArray jsonObject = JSONArray.fromObject(users);
        //单个对象要调用jsonobject类
        JSONObject jsonObject2 = JSONObject.fromObject(user1);
        out.println(jsonObject.toString());
        //out.println(jsonObject2.toString());
    }

这里需要注意单个对象和集合，转换它们为json对象是用不同的类来处理的。

前端页面代码。主要的功能描述就是，当点击“加载对象列表”按钮时，把后台的数据load到表格中。具体代码如下

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'enty_json.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
        <!-- 引入jquery -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script>
    
    <script type="text/javascript">
        function loadUsers(){
            $.ajax({
                url: "EntyToJson", 
                type:"post",
               // data:"name="+$('#name')[0].value+"&password=123",//向后台传送的数据格式
                dataType:"json",
 // 成功返回时需要注意：如果返回的是单个json对象，就不要加上each这个函数，直接data.id,data.value就行了。如果返回的是json对象数组，哪怕只有一个对象在里面，也是需要遍历的
                  //即加上each这个函数，取值为value.id、value.name.value代表的是当前的json对象.
                success: function(data, textStatus){
                    alert(textStatus);
                    $.each(data,function(n,value){
                         var str = "<tr><td>"+value.id+"</td><td>"+value.name+"</td></tr>";
                         $("#userList").append(str);
                    });
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                     alert(textStatus);
                }
            });
        }
    </script>

  </head>
  
  <body>
  <input type="button" id="btn" onClick="loadUsers()" value="加载对象列表">
  <center>
      <div>对象列表</div>
      <table id="userList">
         <tr><td>ID</td><td>姓名</td></tr>
      </table>
  </center>

  </body>
</html>

jquery 遍历json对象和json对象数组

相关推荐