再谈Jquery Ajax方法传递到action(补充)


Posted in Javascript onMay 12, 2014

之前写过一篇文章Jquery Ajax方法传值到action,本文是对该文的补充
假设 controller中的方法是如下:

public ActionResult ReadPerson(PersonModel model)  
        {  
            string s = model.ToString();  
            return Content(s);  
        } 
public ActionResult ReadPersons(List<PersonModel> model)  
        {  
            string result = "";  
            if (model == null) return Content(result);  
            foreach (var s in model)  
            {  
                result += s.ToString();  
                result += "-------------";  
            } 
            return Content(result);  
        }

其中PersonModel定义如下:

public class PersonModel  
    {  
        public int id  
        {  
            set;  
            get;  
        }  
        public string name  
        {  
            set;  
            get;  
        } 
        public int age  
        {  
            set;  
            get;  
        } 
        public bool gender  
        {  
            set;  
            get;  
        }  
        public string city  
        {  
            set;  
            get;  
        } 
        public override string ToString()  
        {  
            string s = string.Format(@"id:{0}  
name:{1}  
age:{2}  
gender:{3}  
city:{4}  
", id, name, age, gender, city);  
            return s;  
        }  
    }

那么controller方法分别接受单个model和一个model的List。采用通过ajax传递参数。
对于传递单个参数的情况,假设js代码如下:

var person = {  
               id: "001",  
               name: "zhangsan",  
               age: "20",  
               gender: true,  
               city: "shanghai"  
           }; 
var option = {  
               url: '/test/ReadPerson',  
               type: 'POST',  
               data: person,  
               dataType: 'html',  
               success: function (result) { alert(result); }  
           };  
$.ajax(option);

从chrome中截图可以看到如下:
再谈Jquery Ajax方法传递到action(补充)

传递的数据是一串Form数据,根据命名匹配的原则,也是可以取得数据的。
再谈Jquery Ajax方法传递到action(补充)

将option 的代码改成如下

var option = {  
               url: '/test/ReadPerson',  
               type: 'POST',  
               data: JSON.stringify(person),  
               dataType: 'html',  
               success: function (result) { alert(result); }  
           };  
$.ajax(option);

其中JSON.stringify方法签名为 stringify ( value [ , replacer [ , space ] ] ),根据ECMA-262标准stringify 函数返回的是JSON格式的字符串。它可以有3个参数。摘抄如下:
The stringify function returns a String in JSON format representing an ECMAScript value. It can take three parameters. The first parameter is required. The value parameter is an ECMAScript value, which is usually an object or array, although it can also be a String, Boolean, Number or null. The optional replacer parameter is either a function that alters the way objects and arrays are stringified, or an array of Strings and Numbers that acts as a white list for selecting the object properties that will be stringified. The optional space parameter is a String or Number that allows the result to have white space injected into it to improve human readability.
默认的ContentType的属性值是"application/x-www-form-urlencoded"
引自http://www.w3.org/TR/html401/interact/forms.html#adef-enctype

看请求头的截图:

再谈Jquery Ajax方法传递到action(补充)

因此,传递到controller的是一个json字符串,MVC根据命名匹配也是可以获得到参数的值。

将将option 的代码改成如下

var option = {  
                url: '/test/ReadPerson',  
                type: 'POST',  
                data: person,  
                dataType: 'html',  
                 contentType: 'application/json',  
                 success: function (result) { alert(result); }  
                }; 

把contentType改成json格式,那么得到的是出错的信息。
虽然person是json对象,但是jquery中的ajax,data会自动的被转换成查询字符串格式key1=value1&key2=value2这种形式,很显然这种形式不是json格式,因此会出错。
要避免转换成查询字符串格式,只需要设置processData为fasle即可。processData默认是true。
这里需要注意的是:当指定了contentType的时候,数据将不再按照Form Data的形式提交了,而是变成Request Data的形式提交。可以从图上的Request Header中看出。需要注意的是,Form Data提交的数据可以由FormCollection获得到。Request Data方式提交的则不能通过FormCollection获得。
如果把processData设置为默认值true。

再谈Jquery Ajax方法传递到action(补充)

如果把processData设置为false。

再谈Jquery Ajax方法传递到action(补充)

以上两种方式,按照application/json的类型传给都会失败,因为json是基于文本的格式,上面两种方式传递的都不是json文本。因此会出错。

因此,把option改成:

var option = {  
    url: '/test/ReadPerson',  
    type: 'POST',  
    data:JSON.stringify(person),  
    dataType: 'html',  
    contentType: 'application/json',  
    success: function (result) { alert(result); }  
}; 

则传递的就是json文本,因此根据命名匹配,就能获得值了。

再谈Jquery Ajax方法传递到action(补充)

对于较为简单是数据类型,有时候不指定contentType也能通过命名匹配传值。但是对于稍微复杂点的数据类型,有时指定contentType: 'application/json',处理起来更加方便。
如果一个controller里的action方法是接受一个List类型的参数,比如:
public ActionResult ReadPersons(List<PersonModel> model)
那么js中先构造这样的一个json对象的数组。如下

var persons = [{ 
                id: "001", 
                name: "zhangsan", 
                age: "20", 
                gender: true, 
                city: "shanghai" 
            }, 
            { 
                id: "002", 
                name: "lisi", 
                age: "21", 
                gender: false, 
                city: "beijing" 
            } 
            ];

单纯一个数组传递是作为data传递是,Form Data也是无法识别出的。因此把这个数组再次组成一个json形式。如下:其中json的键值用model是为了能和controller中的参数名相同,可以匹配。

var jsonp = { model: persons }; 
           var option = { 
               url: '/test/ReadPersons', 
               type: 'POST', 
               data: jsonp, 
               dataType: 'html', 
               success: function (result) { alert(result); } 
           };

由于未指定contentType,因此是默认的application/x-www-form-urlencoded。此时是按照Form Data的方式传递的,

再谈Jquery Ajax方法传递到action(补充)

可以从截图中看到。但是这种格式的数据,controller中只能获得指定model用2个元素,无法获得元素中属性的值。

再谈Jquery Ajax方法传递到action(补充)

如果把data改成JSON.stringify(jsonp),如下:   

var option = { 
              url: '/test/ReadPersons', 
              type: 'POST', 
              data: JSON.stringify(jsonp), 
              dataType: 'html', 
              success: function (result) { alert(result); } 
          };

再谈Jquery Ajax方法传递到action(补充)

那么传递过去的Form Data是一串字符串,controller跟无法识别出这个东西,因此获不到值。如果仅仅设置contentType: 'application/json',而传递的又不是json格式的数据,如下:

那么传递过去的Form Data是一串字符串,controller跟无法识别出这个东西,因此获不到值。如果仅仅设置contentType: 'application/json',而传递的又不是json格式的数据,如下:

var option = { 
    url: '/test/ReadPersons', 
    type: 'POST', 
    data: jsonp, 
    dataType: 'html', 
    contentType: 'application/json', 
    success: function (result) { alert(result); } 
};

因为jquery的ajax方法会把data转换成查询字符串,因此就变成如下的样子。这串文本当然不符合json格式,因此会出现下面的错误。

再谈Jquery Ajax方法传递到action(补充)

再谈Jquery Ajax方法传递到action(补充)

如果设置contentType: 'application/json',并且设置data: JSON.stringify(persons),如下:

var option = { 
                url: '/test/ReadPersons', 
                type: 'POST', 
                data: JSON.stringify(persons), 
                dataType: 'html', 
                contentType: 'application/json', 
                success: function (result) { alert(result); } 
            };

那么可以获得到真正完整的json数据了

再谈Jquery Ajax方法传递到action(补充)

最后,此处再演示一个更复杂的参数类型,以便加深理解。
首先看一下Controller中的方法签名,TestClassB 和一个TestClassA的List。稍显复杂。

public ActionResult Fortest(TestClassB TB,List<TestClassA> TA) 
        { 
            string result = ""; 
            return Content(result); 
        }

再看TestClassA和TestClassB,更显复杂。但是结构要清晰的话,也不是很难。

public class TestClassA 
    { 
       public string a1 { set; get; } 
       public List<string> a2 { set; get; } 
    } 
    public class TestClassB 
    { 
        public string b1 { set; get; } 
        public InnerTestClassC ITCC { set; get; } 
        public class InnerTestClassC 
        { 
            public List<int> c1 { set; get; } 
        } 
    }

看js代码:逐步的构造出一个json格式。

$("#btn").click(function () { 
            var jsondata = { TB: {}, TA: [] }; 
            jsondata.TB.b1 = "b1"; 
            jsondata.TB.ITCC = {}; 
            jsondata.TB.ITCC.c1 = new Array(1, 2, 3, 4); 
            var ta1 = {}; 
            ta1.a1 = "a1"; 
            ta1.a2 = new Array("a", "b", "x", "y"); 
           var ta2 = {}; 
            ta2.a1 = "a2"; 
            ta2.a2 = new Array("a2", "b2", "x2"); 
            jsondata.TA.push(ta1); 
            jsondata.TA.push(ta2); 
            var option = { 
                url: '/test/Fortest', 
                type: 'POST', 
                data: JSON.stringify(jsondata), 
                dataType: 'html', 
                contentType: 'application/json', 
                success: function (result) { alert(result); } 
            }; 
            $.ajax(option); 
        });

最终,发送出去的json字符串如下:
{"TB":{"b1":"b1","ITCC":{"c1":[1,2,3,4]}},"TA":[{"a1":"a1","a2":["a","b","x","y"]},{"a1":"a2","a2":["a2","b2","x2"]}]}
Controller接收到这个json串后,就能自动的匹配参数了。具体得到的参数如下截图:

再谈Jquery Ajax方法传递到action(补充)

再谈Jquery Ajax方法传递到action(补充)

总结:

1.不指定contentType的话,默认都是application/x-www-form-urlencoded方式发送。此时即便发送的是json格式的数据,默认情况下,jquery的ajax也会把他转为查询字符串的形式(可以通过修改ajax参数修改),以FormData的形式发送出去。
2.不指定contentType的时候,如果controller中的方法签名比较简单,那么即便是FormData形式的数据也能由MVC的命名匹配规则获取到数据。
3.指定contentType为'application/json'时候,发送的数据必须是符合json规范的字符串。通常,使用 JSON.stringify(jsondata)有较好的可读性,可以获得一个json字符串。当然,不是必须的。使用拼接的字符串,只要是符合json规范的,也是可以发送的。
4.如果contentType为'application/json'时,发送的data不是符合json规范的字符串,则会出错。
5.通常情况下,尽量指定contentType为'application/json',并且发送json字符串作为发送数据,这样可读性更好,并且对于复杂的函数签名,也能起到很好的匹配。

本文出自 “一只博客” 博客

Javascript 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JS解析XML的实现代码
Nov 12 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
Jquery Ajax方法传值到action的方法
May 11 #Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
如何防止回车(enter)键提交表单
May 11 #Javascript
js取整数、取余数的方法
May 11 #Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 #Javascript
You might like
提升PHP速度全攻略
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python如何写个俄罗斯方块
2020/11/06 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
UNIX文件系统常用命令
2012/05/25 面试题
廉洁家庭事迹材料
2014/05/15 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
MySQL数据库完全卸载的方法
2022/03/03 MySQL
如何使用python包中的sched事件调度器
2022/04/30 Python