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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_26054303/article/details/51436378

         最近一直做些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交互的总结,希望能对大家有所帮助。


展开阅读全文

没有更多推荐了,返回首页