json数据客户端和服务端的处理方法
2010-10-06 00:00
537 查看
在b/s的开发中,用的最多的传输格式莫过于json了。本文主要讲解的是如何在客户端把页面上的数据转换为json,然后通过ajax提交到服务端,服务端如何解析json数据。
主要用到的工具有:
1.json.js javascript <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
$(function () {
$("#submit").click(function () {
var array = []; //创建一个集合,保存全部person
//遍历每个persion
$(".person").each(function () {
var name = $(this).find(".name").val();
var age = $(this).find(".age").val();
var sex = $(this).find(".sex").val();
var persion = {}; //创建一个对象,保存这个persion的信息
persion.name = name;
persion.age = age;
persion.sex = sex;
array.push(persion); //把这个persion添加到array集合中
});
$.ajax({
type: "post",
url: "save.ashx",
data: { data: JSON.stringify(array) }, //通过json.js的JSON.stringify()方法,把array转换为json字符串,post到save.ashx处理页面去
success: function (response) {
alert(response);
}
});
});
});
</script>
客户端部分完成,单击"submit"按钮,发送的数据如图:
下面轮到服务端解析的过程。
当然要引入刚才的AjaxPro.2.dll
save.ashx代码如下:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string data = context.Request["data"];
//反序列化,并转换为JavaScriptArray对象
AjaxPro.JavaScriptArray parentMode = (AjaxPro.JavaScriptArray)AjaxPro.JavaScriptDeserializer.DeserializeFromJson(data, typeof(AjaxPro.JavaScriptArray));
AjaxPro.JavaScriptObject item = null;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
string name = string.Empty;
string sex = string.Empty;
string age = string.Empty;
//遍历对象
for (int i = 0; i < parentMode.Count; i++)
{
//获取当前对象
item = (AjaxPro.JavaScriptObject)parentMode[i];
//获取各个属性的值
name = item["name"].ToString();
sex = item["sex"].ToString();
age = item["age"].ToString();
sb.AppendFormat("name:{0},sex:{1},age:{2};",name,sex,age);
}
context.Response.Write(sb.ToString());
}
这样,就可以知道各个属性的值了。好了,现在重新单击"submit"按钮,结果如图:
至此,整个传输过程完毕。
本程序代码打包:
点击下载源代码
主要用到的工具有:
1.json.js javascript <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
$(function () {
$("#submit").click(function () {
var array = []; //创建一个集合,保存全部person
//遍历每个persion
$(".person").each(function () {
var name = $(this).find(".name").val();
var age = $(this).find(".age").val();
var sex = $(this).find(".sex").val();
var persion = {}; //创建一个对象,保存这个persion的信息
persion.name = name;
persion.age = age;
persion.sex = sex;
array.push(persion); //把这个persion添加到array集合中
});
$.ajax({
type: "post",
url: "save.ashx",
data: { data: JSON.stringify(array) }, //通过json.js的JSON.stringify()方法,把array转换为json字符串,post到save.ashx处理页面去
success: function (response) {
alert(response);
}
});
});
});
</script>
客户端部分完成,单击"submit"按钮,发送的数据如图:
下面轮到服务端解析的过程。
当然要引入刚才的AjaxPro.2.dll
save.ashx代码如下:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string data = context.Request["data"];
//反序列化,并转换为JavaScriptArray对象
AjaxPro.JavaScriptArray parentMode = (AjaxPro.JavaScriptArray)AjaxPro.JavaScriptDeserializer.DeserializeFromJson(data, typeof(AjaxPro.JavaScriptArray));
AjaxPro.JavaScriptObject item = null;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
string name = string.Empty;
string sex = string.Empty;
string age = string.Empty;
//遍历对象
for (int i = 0; i < parentMode.Count; i++)
{
//获取当前对象
item = (AjaxPro.JavaScriptObject)parentMode[i];
//获取各个属性的值
name = item["name"].ToString();
sex = item["sex"].ToString();
age = item["age"].ToString();
sb.AppendFormat("name:{0},sex:{1},age:{2};",name,sex,age);
}
context.Response.Write(sb.ToString());
}
这样,就可以知道各个属性的值了。好了,现在重新单击"submit"按钮,结果如图:
至此,整个传输过程完毕。
本程序代码打包:
点击下载源代码
相关文章推荐
- 客户端封装数据为json格式的数据提交到服务端的方法
- ASP输出JSON数据及客户端jQuery处理方法
- Python Flask之处理客户端通过POST方法传送的数据(json文本,文件)
- (九)springmvc之json的处理(服务端发送json数据到客户端)
- 发送ajax请求无刷新生成表格的方法(处理json数据)...
- JMeter中对于Json数据的处理方法
- 用Jquery处理PHP返回的JSON格式数据的三种方法
- 使用CXF开发WebService程序的总结(五):基于Map数据类型处理的的客户端和服务端代码的编写
- 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍
- SpringMVC中出现" 400 Bad Request "错误(用@ResponseBody处理ajax传过来的json数据转成bean)的解决方法
- JS 处理JSON数据及javascript处理对象、JSON对象、hash对象、数组对象的方法
- 实践Android客户端与服务端之间使用JSON交互数据。
- CASE函数 sql server——分组查询(方法和思想) ref和out 一般处理程序结合反射技术统一执行客户端请求 遍历查询结果集,update数据 HBuilder设置APP状态栏
- 【jmeter】JMeter中返回Json数据的处理方法
- SpringMvc 服务端发布json数据+android客户端解析json数据
- Java Web项目中Spring框架处理JSON格式数据的方法
- JS客户端获取服务端返回数据方法总结
- Servlet,JDBC,JSONObject三者配和处理客户端请求并返回正确的json数据
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- 客户端POST发送json数据给服务端,客户端端接收服务器端json数据响应