一个简单json数据提交实例
2015-03-11 14:30
330 查看
1.客户端编程：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>Insert title
here</title>
</head>
<script type="text/javascript"
src="js/jquery-1.4.2.js"></script>
<script type="text/javascript"
src="js/json2.js"></script>
<body>
<form action="">
<table>
<tr>
<td>名字</td>
<td><input type="text"
id="name"
name="name"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text"
id="age"
name="age"/></td>
</tr>
<tr>
<td><input
type="button" value="提交" onclick="commit();"/>
</td>
</tr>
</table>
<table id="ulist" border="2">
</table>
</form>
</body>
<script type="text/javascript">
function commit(){
$.ajax(
{type : "post",
data:{name: $ ('#name').val(),
age: $ ('#age').val()},
url : "testJson_testJson.action",
dataType : "JSON",
success : callback
}
);
}
function callback(data){
var json
= JSON.parse(data);
alert("fdf");
var ulist
= $("#ulist");
$.each(json,
function(i,item){
ulist.append(
"<tr><td>"+item.name+"</td><td>"+item.age+"</td></tr>"
);
})
}
</script>
</html>
2.服务端编程：用到sturst2
public class Person {
private
String name;
private
String age;
public
String getName() {
return
name;
}
public void
setName(String name) {
this.name =
name;
}
public
String getAge() {
return
age;
}
public void
setAge(String age) {
this.age =
age;
}
}
public class TestJsonAction {
private
static final long serialVersionUID = -3571998877536556903L;
public
String testJson() throws Exception {
Person p1 =
new Person();
p1.setName("nn");
p1.setAge("11");
Person p2 =
new Person();
p2.setName("gg");
p2.setAge("12");
Person p3 =
new Person();
p3.setName("rr");
p3.setAge("24");
List<Person> ulist = new
ArrayList<Person>();
ulist.add(p1);
ulist.add(p2);
ulist.add(p3);
String name
=ServletActionContext.getRequest().getParameter("name");
String age =
ServletActionContext.getRequest().getParameter("age");
Person p4 =
new Person();
p4.setName(name);
p4.setAge(age);
ulist.add(p4);
JSONArray
json = JSONArray.fromObject(ulist);
ServletActionContext.getResponse().getWriter().print(json);
return
null;
}
}
<%@ 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>Insert title
here</title>
</head>
<script type="text/javascript"
src="js/jquery-1.4.2.js"></script>
<script type="text/javascript"
src="js/json2.js"></script>
<body>
<form action="">
<table>
<tr>
<td>名字</td>
<td><input type="text"
id="name"
name="name"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text"
id="age"
name="age"/></td>
</tr>
<tr>
<td><input
type="button" value="提交" onclick="commit();"/>
</td>
</tr>
</table>
<table id="ulist" border="2">
</table>
</form>
</body>
<script type="text/javascript">
function commit(){
$.ajax(
{type : "post",
data:{name: $ ('#name').val(),
age: $ ('#age').val()},
url : "testJson_testJson.action",
dataType : "JSON",
success : callback
}
);
}
function callback(data){
var json
= JSON.parse(data);
alert("fdf");
var ulist
= $("#ulist");
$.each(json,
function(i,item){
ulist.append(
"<tr><td>"+item.name+"</td><td>"+item.age+"</td></tr>"
);
})
}
</script>
</html>
2.服务端编程：用到sturst2
public class Person {
private
String name;
private
String age;
public
String getName() {
return
name;
}
public void
setName(String name) {
this.name =
name;
}
public
String getAge() {
return
age;
}
public void
setAge(String age) {
this.age =
age;
}
}
public class TestJsonAction {
private
static final long serialVersionUID = -3571998877536556903L;
public
String testJson() throws Exception {
Person p1 =
new Person();
p1.setName("nn");
p1.setAge("11");
Person p2 =
new Person();
p2.setName("gg");
p2.setAge("12");
Person p3 =
new Person();
p3.setName("rr");
p3.setAge("24");
List<Person> ulist = new
ArrayList<Person>();
ulist.add(p1);
ulist.add(p2);
ulist.add(p3);
String name
=ServletActionContext.getRequest().getParameter("name");
String age =
ServletActionContext.getRequest().getParameter("age");
Person p4 =
new Person();
p4.setName(name);
p4.setAge(age);
ulist.add(p4);
JSONArray
json = JSONArray.fromObject(ulist);
ServletActionContext.getResponse().getWriter().print(json);
return
null;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个简单json数据提交实例
- 无刷新提交表单(php+jquery+ajax+json的一个最简单实例 )
- 用一个最简单方法解决asp.net页面刷新导致数据的重复提交
- 一个可以生成复杂结构的json数据的简单例子
- 一个简单的Android客户端从服务器端获取json数据并解析的实现代码
- php实现的一个简单json rpc框架实例
- php+jquery+ajax+json的一个最简单实例
- 一个包含Jersey库的简单Web Service以及一个发送Json数据的Java客户端
- 一个JSON 实例 jQuery 解析JSON数据
- 一个JSON 实例: jQuery 解析JSON数据
- 将任意一个jQuery对象进行表单序列化，免除了提交请求时大量拼写表单数据的烦恼，支持键值对<name&value>格式和JSON格式。
- httpClient 使用post方法提交json数据，接收返回数据实例
- 一个JSON 实例 jQuery 解析JSON数据
- Ajax使用Action中返回的Json数据的简单实例(一)
- 一个简单的Extjs3.0表单提交实例
- php返回json数据简单实例
- php返回json数据简单实例
- 简单的存储过程实例2--对比三个表中的数据，将三个表中金额挑选一个最优值
- jQuery解析json格式数据简单实例
- UE4 WCF RestFul 服务器 读取JSON 数据并解析 简单实例