Javascript处理返回的JSON数据

最新推荐文章于 2022-09-11 16:57:18 发布

emoven

最新推荐文章于 2022-09-11 16:57:18 发布

阅读量4.3k

点赞数 3

分类专栏： javascript 文章标签： javascript JavaScript Javascript javaScript json JSON Json xmlhttprequest

本文链接：https://blog.csdn.net/emoven/article/details/8296704

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在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包。

jar包下载地址：http://download.csdn.net/detail/emoven/4893164

二：具体的代码编写

实体类：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="显示数据" οnclick="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框架改进，减少代码量。

更多资源： http://www.cnblogs.cn/jdbc/archive/2012/08/08/JA.html

emoven

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Javascript处理返回的JSON数据

在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-
复制链接

扫一扫