Java+Ajax+JSON

SuperCustomer

浏览: 111409 次
性别:
来自: 武汉

最近访客更多访客>>

沈寅麟

764212785

J_KKK

天涯何处无芳草

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java json Ajax Struts Apache

1、下载JSON jar包

http://json-lib.sourceforge.net/

2、下载JSON js库

http://www.json.org/json2.js

3、下载JSON jar包依赖的jar包

jakarta commons-lang 2.4

jakarta commons-beanutils 1.7.0

jakarta commons-collections 3.2

jakarta commons-logging 1.1.1

ezmorph 1.0.6

4、新建一项目Json，导入以上jar包以及struts1.3所需jar包

5、将下载的js文件拷贝到项目WebRoot下面的任意目录

6、新建一html文件json.html，导入js库

<!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">
<script type="text/javascript" src="script/json2.js"></script>
<title>Ajax+JSON+Java</title>
<style type="text/css">
	fieldset{
		margin:10px;
		padding:5px;
	}
	table{
		border: 1px solid #44b6dc;
		border-collapse: collapse;
		empty-cells: show;
		margin:10px
	}
	caption{
		text-align:left;
		padding-left:5px
	}
	th{
		background: #e1edfb;
		height:25px;
		border: 1px solid #44b6dc;
		padding:5px
	}
	td {
		border: 1px solid #44b6dc;
		padding:5px
	}
	input{
		margin-top:5px
	}
	.blank{
		letter-spacing:60px
	}
</style>
<script type="text/javascript">
	var xmlHttp;
	function createXMLHttp(){
		if(window.ActiveXObject){
			try{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e1){
				try{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e2){
					alert("创建XMLHttpRequest对象失败");
				}
			}
		}else if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}
	}
	function User(name,gender,age,phone,address,email){
		this.name=name;
		this.gender=gender;
		this.age=age;
		this.phone=phone;
		this.address=address;
		this.email=email;
	}
	function add(){
		var name,gender,age,phone,address,email;
		name=document.getElementsByName("name")[0].value;
		for(var i=0;i<document.getElementsByName("gender").length;i++){
			if(document.getElementsByName("gender")[i].checked){
				gender=document.getElementsByName("gender")[i].value;
			}
		}
		age=document.getElementsByName("age")[0].value;
		phone=document.getElementsByName("phone")[0].value;
		address=document.getElementsByName("address")[0].value;
		email=document.getElementsByName("email")[0].value;
		var user=new User(name,gender,age,phone,address,email);
		var json=JSON.stringify(user);
		createXMLHttp();
		xmlHttp.onreadystatechange=process;
		xmlHttp.open("post","json.do",true);
		xmlHttp.send(json);
	}
	function process(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				var user;
				user=JSON.parse(xmlHttp.responseText);
				update(user);
			}
		}
	}
	function update(user){
		var table=document.getElementById("userList");
		
		table.insertRow(-1);
		
		var rows=table.rows.length;
		
		table.rows[rows-1].bgColor="#ffffff";
		
		table.rows[rows-1].align="center";
		
		table.rows[rows-1].insertCell(-1);
		table.rows[rows-1].insertCell(-1);
		table.rows[rows-1].insertCell(-1);
		table.rows[rows-1].insertCell(-1);
		table.rows[rows-1].insertCell(-1);
		table.rows[rows-1].insertCell(-1);
		
		table.rows[rows-1].cells[0].innerHTML=user.name;
		table.rows[rows-1].cells[1].innerHTML=user.gender;
		table.rows[rows-1].cells[2].innerHTML=user.age;
		table.rows[rows-1].cells[3].innerHTML=user.phone;
		table.rows[rows-1].cells[4].innerHTML=user.address;
		table.rows[rows-1].cells[5].innerHTML=user.email;
	}
</script>
</head>
<body>
	<fieldset>
		<legend>添加用户</legend>
		姓名：<input type="text" name="name" maxlength="20"><br/>
		性别：<input type="radio" name="gender" value="male" checked="checked">男
			 <input type="radio" name="gender" value="female">女<br/>
		年龄：<input type="text" name="age" maxlength="3"><br/>
		电话：<input type="text" name="phone" maxlength="11"><br/>
		地址：<input type="text" name="address" maxlength="50"><br/>
		邮箱：<input type="text" name="email" maxlength="50"><br/>
			<span class="blank">&nbsp;&nbsp;</span>
			<input type="button" value="添加" onClick="add()">
	</fieldset>
	<table id="userList" border="1">
		<caption>用户列表</caption>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>电话</th>
			<th>地址</th>
			<th>邮箱</th>
		</tr>
	</table>
</body>
</html>

7、新建一action JsonAction.java

package jp.com.syspro.action;

import java.io.BufferedReader;
import java.io.PrintWriter;

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

import net.sf.json.JSONObject;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class JsonAction extends Action {

	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		StringBuffer json=new StringBuffer();
		String line="";
		BufferedReader br=request.getReader();
		while((line=br.readLine())!=null){
			line=new String(line.getBytes("ISO8859-1"),"UTF-8");
			json.append(line);
		}
		
		JSONObject jo=JSONObject.fromObject(json.toString());
		
		String name=jo.getString("name");
		String gender="";
		if("male".equals(jo.getString("gender"))){
			gender="男";
		}else{
			gender="女";
		}
		String age=jo.getString("age");
		String phone=jo.getString("phone");
		String address=jo.getString("address");
		String email=jo.getString("email");
		
		jo.put("name", name);
		jo.put("gender", gender);
		jo.put("age", age);
		jo.put("phone",phone);
		jo.put("address", address);
		jo.put("email", email);
		
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out=response.getWriter();
		out.println(jo.toString());
		out.flush();
		out.close();
		out.close();
		return null;
	}
	
}

8、运行结果