Java+Ajax+JSON
1、下载JSON jar包
http://json-lib.sourceforge.net/
2、下载JSON 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"> </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、运行结果
