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交互的总结，希望能对大家有所帮助。