Ajax发送json格式数据到Asp.net MVC服务端的一些代码片段

         最近一直做些asp.net mvc的页面，每次前端与后端交互，都要baidu查下代码怎么写，也不去思考为什么这么写，导致每每写这代码，都需要下search下代码。

正好现在有点空闲时间，我就把我写的代码整理下，做个记录。并且把自己的思路理理清楚。内容比较简单，希望也能对大家有点帮助。

         先介绍下Json，Json是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。

 在JSON中，有两种结构：对象和数组。

1.对象

一个对象以“{”开始，“}”结束。每个“key”后跟一“:”，“‘key/value’ 对”之间运用 “,”分隔。

person = {"name":"jack", "password":"123"}

2.数组

数组是值的有序集合。一个数组以“[”开始，“]”结束。值之间运用 “,”分隔

person= [{"name":"jack", "password":"123"}, {"name":"tony", "password":"321"}];

先区分下JSON字符串和JSON对象（在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，

所以，JSON对象和JSON字符串之间的相互转换是关键。）

1. JSON字符串

var jsonStr = '{"name":"jack", "password":"123"}';  由于在Js中单引号和双引号都可以表示一个字符串，单引号也可以换成双引号

2. JSON对象

var jsonObj = {"name":"jack", "password":"123"};

Json字符串转换为Json对象

第一种方法

var myObject = eval('(' + jsonStr+ ')');

eval是js自带的函数,但是不太安全，因为jsonStr可能不是合法的json字符串，如果是别的js代码，也会被执行。

第二种方法

var myObject = JSON.parse(jsonStr);

它可以把json字符串转换为json对象，供给js调用。

Json对象转Json字符串

var jsonString = JSON.stringify(myObject);

json对象也可以是数组，可以是js对象字面量

对Json对象的操作

1. 遍历JSON对象

myJson = {"name":"jack", "password":"123"};

for(var p in myJson){//遍历json对象的每个key/value对,p为key
   alert(p + " " + myJson[p]);
}

2. 遍历JSON数组

persons = [
{"name":"jack", "password":"123"},{"name":"tony", "password":"321"}];for(var p in persons ){//遍历json数组时，这么写p为索引，0,1   alert(
persons
[p].name + " " +
persons 
[p].password);}

或者

for(var i = 0; i < packJson.length; i++){

   alert(packJson[i].name + " " + packJson[i].password);

}

客户单通过Ajax提交Json数据格式

 function SearchHeadList() {
        var jsondata = '{'
                + '"StartDate":' + '"' + $("#StartDate").val() + '",'
                + '"EndDate":' + '"' + $("#EndDate").val() + '",'
                + '"AreaCode":' + '"' + $("#AreaCode").val() + '",'
                + '"ShelfCode":' + '"' + $("#ShelfCode").val() + '",'
                + '"LocID":' + '"' + $("#LocID").val() + '"}';

        $.ajax({
            type: "POST"
                , url: '@Url.Action("PdHeadListPartial", "CloudProdCheck")'
                , data: jsondata
                , contentType: "application/json"
                , success: function (result) {
                    $("#headList").html(result);
                }
        });
    }

上面是我的一个代码片段，先把值封装成json字符串，再发送到服务端。

这里我经过几次测试，当data传递的是json对象，或者别的js对象时，提交会报错，无效的json基元。

当查看生成的request header请求时，Request Payload的值是“StartDate=2011-05-04&EndDate=2016%2F5%2F17&AreaCode=&ShelfCode=&LocID=”

而不是json字符串。因为contentType定义的是json格式，这里需要传递json字符：{StartDate: "2016/5/17", EndDate: "2016/5/17", AreaCode: "", ShelfCode: "", LocID: ""}

深究原因，因为如果传递的是js对象或者json对象，如下面的代码所示，会对对象进行$.param()的处理，生成key=value&key1=value1的格式的字符串。

//在ajax()方法中，对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
    s.data = jQuery.param( s.data, s.traditional );
}

//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
        // Serialize the form elements
        jQuery.each( a, function() {
            add( this.name, this.value );
        });

    } else {
        // If traditional, encode the "old" way (the way 1.3.2 or older
        // did it), otherwise encode params recursively.
        for ( prefix in a ) {
            buildParams( prefix, a[ prefix ], traditional, add );
        }
    }

当然，如果你希望传递key=value&key1=value1这样的字符串给服务端，那contentType需要转化为application/x-www-form-urlencoded格式，而不是json格式。

服务端Controller中的方法

public ActionResult PdHeadListPartial(PDSearchInfo info)

因为是json格式提交的数据，所以需要定义相对应的对象去解析它

 public class PDSearchInfo
  {
        public string LocID { get; set; }

        public string ShelfCode { get; set; }

       public string AreaCode { get; set; }


        public string Creator { get; set; }

        public string StartDate { get; set; }

        public string EndDate { get; set; }
}

这个解析asp.net mvc框架自动会帮你做掉，只要你的对象与传递过来的json字符串能转换。

另外，有时候我们不使用json数据交换的时候，ajax提交和服务端的接收就需要改一下。

1. POST方式提交key=value&key1=value1这样的字符串

这样ajax代码需变更，如下

function SearchHeadList() {
        var jsondata = '{'
                + '"StartDate":' + '"' + $("#StartDate").val() + '",'
                + '"EndDate":' + '"' + $("#EndDate").val() + '",'
                + '"AreaCode":' + '"' + $("#AreaCode").val() + '",'
                + '"ShelfCode":' + '"' + $("#ShelfCode").val() + '",'
                + '"LocID":' + '"' + $("#LocID").val() + '"}';

        var jsonObj = JSON.parse(jsondata);

        $.ajax({
            type: "POST"
                , url: '@Url.Action("PdHeadListPartial", "CloudProdCheck")'
                , data: jsonObj
                , contentType: "application/x-www-form-urlencoded" //post的时候格式必须为application/x-www-form-urlencoded，这个也是ajax的默认格式。
                , success: function (result) {
                    $("#headList").html(result);
                }
        });
    }

注意，contentType格式需要为application/x-www-form-urlencoded，否则服务端Request.Form中没有数据。

服务端获取请求的参数

针对post请求，需要通过Request.Form去获取参数。

2. Get方式提交key=value&key1=value1这样的字符串

客户端只需要把type改成Get，服务端需要通过Request.QueryString去获取请求参数

以上就是我对ajax，json，服务端asp.net mvc交互的总结，希望能对大家有所帮助。