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"> </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、运行结果
分享到:
相关推荐
实现了java+ajax+json+jquery的完整实例,包括ajax+jquery向后台传参,后台传输json数据到前台ajax接收。里面有自己遇到的四个问题,及解决的具体办法。
ajax学习:Java+ajax写的登录实例
这是本自己动手在MyEclipse下做的一个小程序,请大家指教。
本例子采用弄AJAX和JSON格式的字符串 ,改变前台下拉列表的内容 不刷新页面自动将其他文本框赋值
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用MyEclipse 10运行出来.并且付有sql脚本.可直接导入运行.并且经本人...
主要用于三级联动,使用的html,ajax,后端用的原生servlet,或者你也可以根据自己的需要使用框架,毕竟只是做了数据库查询操作,返回的是json格式的数据,所以对后端要求不高,本资源为自己整理出来的,当然数据库...
基于Jquery+Ajax+Json实现分页显示附效果图
jsp+servlet+ajax使用json作为数据传输介质完成 1.用户名是否存在的验证 2.根据姓名获取该对象使用gson将对象转换成json后返回给客户端并显示,完成修改功能时经常使用 3.gson将集合转换成json(数组格式)后返回给...
注:此项目是用IntelliJ IDEA 13.1.3此软件编写而成,不过和myeclipse都差不多,本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码,拦截器,如果用户没有登录则不能进行相应操作...
关键代码都在里面 资源是工程中的一部分 暂不能运行 原来用的是Java实现Json串 考虑到频繁访问数据库 就改成了存储过程
在.NET中使用AJAX技术来做服务器端和客户端交互,用JSON做为在异步应用程序中发送和接收信息的数据格式。
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接...
模拟了基本前端与后端交互JSon数据,使用了Java语言+Maven+SpringMVC+Ajax @RequestBody+Json传输完成基本数据交互
Springmvc+maven+ajax+jquery+json+mybatis做的异步登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用IntelliJ IDEA 13.1.3运行出来.并且付有sql脚本.可直接导入运行...
本项目为Springmvc+mybatis+JSON+jQuery+Ajax无刷新登录,导出Excel,修改密码,RestFUL风格增删改查,加Js用户名检验以及密码长度校验等等。并且有大家喜欢的功能导出EXCEL,并且也实现了ajax无刷新注册,登录等等,...
本文给大家介绍基于jquery+ajax+json实现数据分页显示,以及JAVA+JQuery实现异步分页,本文代码简单易懂,非常具有参考价值,感兴趣的朋友一起学习吧
全栈实现学生信息管理系统,...后端:java、jdbc、servlet、org.json 数据库:mysql、Navicat for MySQL IDE:IntelliJ IDEA、Visual Studio Code 服务器:Tomcat GitHub:https://github.com/ChongqingWangYu/StudentMS
本项目使用了jQuery的get/post两种方法提交Json格式的数据到后台,后台再把Json格式的数据传到前台。实现了JSON字符串和JSON对象之间的转换。