Javascript处理返回的JSON数据

jopen 11年前

  在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框架改进,减少代码量。