jquery 遍歷json對象和json對象數組

時間 2019-11-18

原文原文鏈接

描述：jQuery ajax處理服務端返回的json數據，這裏主要說明的是對象數據，即目標是對象。javascript

首先是後臺的處理過程。本例子爲了方便採用servlet來做爲服務端。css

聲明一個enty類.User.java代碼以下：html

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對象是用不一樣的類來處理的。java

前端頁面代碼。主要的功能描述就是，當點擊「加載對象列表」按鈕時，把後臺的數據load到表格中。具體代碼以下jquery

<%@ 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>