json数据客户端和服务端的处理方法

在b/s的开发中，用的最多的传输格式莫过于json了。本文主要讲解的是如何在客户端把页面上的数据转换为json，然后通过ajax提交到服务端，服务端如何解析json数据。
主要用到的工具有：
1.json.js 点击下载json.js。用于把object转换为json
2.AjaxPro.2.dll
点击下载AjaxPro.2.dll。用于服务端解析json数据。（当然有其他dll可用）
3.jquery.js ,这个不用说了吧
--------------------------------------------------------------------------------------------------------------------
有如下界面：

<div class="person">
        name:<input type="text" class="name" value="darren" />,age:<input type="text" class="age" value="18" />,sex:<input type="text" class="sex" value="boy" />
    </div>
    <div class="person">
        name:<input type="text" class="name" value="petter" />,age:<input type="text" class="age" value="20" />,sex:<input type="text" class="sex" value="boy" />
    </div>
    <div class="person">
        name:<input type="text" class="name" value="anny" />,age:<input type="text" class="age" value="15" />,sex:<input type="text" class="sex" value="girl" />
    </div>
    <input type="button" id="submit" value="submit" />

 

如何把这些数据转换为json呢，当然你可以拼接成一串字符串，然后提交。我这里通过object的形式转换为json再提交。

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"按钮，结果如图：


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

本程序代码打包： 点击下载源代码