Javascript处理返回的JSON数据
jopen
12年前
在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框架改进，减少代码量。