您的位置:首页 > Web前端 > JavaScript

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"按钮,结果如图:



至此,整个传输过程完毕。

本程序代码打包:

点击下载源代码
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐