Javascript處理返回的JSON數據

jopen 12年前發布 | 45K 次閱讀 JSON開發包 JavaScript

  在JSP頁面經常要從數據庫中讀取數據。有時候在頁面中也要一些特效處理。如運用Ajax技術。下面這個例子是在javascript中用ajax技術實現Json數據的無刷新加載。

  一：導入Json要用到的jar包

     commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、 commons-lang-2.5.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar、json- lib-2.4-jdk15.jar共6個jar包。

二：具體的代碼編寫

實體類：User

    package entity;  

    public class User {  
        private String userId;  
        private String userName;  
        private int age;  
        public User() {  
        }  
        public User(String userId, String userName, int age) {  
            this.userId = userId;  
            this.userName = userName;  
            this.age = age;  
        }  
        public String getUserId() {  
            return userId;  
        }  
        public void setUserId(String userId) {  
            this.userId = userId;  
        }  
        public String getUserName() {  
            return userName;  
        }  
        public void setUserName(String userName) {  
            this.userName = userName;  
        }  
        public int getAge() {  
            return age;  
        }  
        public void setAge(int age) {  
            this.age = age;  
        }  


    }

JSP頁面：jsonTest.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"  
        pageEncoding="UTF-8"%>  
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
     "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>JSON測試</title>  
    <script type="text/javascript">  
    function create(){                 
        if(window.XMLHttpRequest){                      
            xmlHttp=new XMLHttpRequest();                  
        }else if(window.ActiveXObject){                     
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")                
        }             
    }  
    function run(){   
        var url = "JsonServlet?date="+new Date();  
        create();                 
        xmlHttp.open("POST",url,true);                  
        xmlHttp.onreadystatechange=callback;                  
        xmlHttp.send();             
    }     
    function callback(){                 
        if(xmlHttp.readyState==4){                      
            if(xmlHttp.status==200){                         
                 var xmlDoc=xmlHttp.responseText;                      
                 var data=eval(xmlDoc);  
                 var json = "";  
                 for(var i=0;i<data.length;i++){  
                     json +=data[i].userId+":"+data[i].userName+","+data[i].age+"<br>";  
                 }  
                 document.getElementById("content").innerHTML=json;  
            }  
            else{                          
                alert("AJAX服務器返回錯誤！");                     
            }    
        }             
    }  
    </script>  
    </head>  
    <body>  
        <input type="button" value="顯示數據" onclick="run()">  
        <div id="content"></div>  
    </body>  
    </html>

servlet：JsonServlet類

    package servlet;  

    import java.io.IOException;  
    import java.util.ArrayList;  
    import java.util.List;  

    import javax.servlet.ServletException;  
    import javax.servlet.http.HttpServlet;  
    import javax.servlet.http.HttpServletRequest;  
    import javax.servlet.http.HttpServletResponse;  

    import net.sf.json.JSONArray;  

    import entity.User;  

    /**  
     * Servlet implementation class JsonServlet  
     */  
    public class JsonServlet extends HttpServlet {  
        private static final long serialVersionUID = 1L;  

        /**  
         * @see HttpServlet#HttpServlet()  
         */  
        public JsonServlet() {  
            super();  
            // TODO Auto-generated constructor stub  
        }  

        /**  
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)  
         */  
        protected void doGet(HttpServletRequest request, HttpServletResponse response)   
    throws ServletException, IOException {  
            doPost(request, response);  
        }  

        /**  
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)  
         */  
        protected void doPost(HttpServletRequest request, HttpServletResponse response)   
    throws ServletException, IOException {  
            request.setCharacterEncoding("UTF-8");  
            response.setContentType("text/html; charset=UTF-8");  
            List<User> users = new ArrayList<User>();  
            users.add(new User("1", "李峰", 18));  
            users.add(new User("2", "王偉", 18));  
            users.add(new User("3", "張力", 20));  
            //轉成json對象  
            JSONArray jsonArray = JSONArray.fromObject(users);  
            response.getWriter().write(jsonArray.toString());  
        }  

    }
到此，javascript用ajax處理json數據的例子就完成了。ajax的代碼是采用比較原始的方法。可以用一些ajax框架改進，減少代碼量。

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！