之前写过一篇文章Jquery Ajax方法传值到action,本文是对该文的补充。

假设 controller中的方法是如下:

  1. public ActionResult ReadPerson(PersonModel model)
  2. {
  3. string s = model.ToString();
  4. return Content(s);
  5. }
  6. public ActionResult ReadPersons(List<PersonModel> model)
  7. {
  8. string result = "";
  9. if (model == null) return Content(result);
  10. foreach (var s in model)
  11. {
  12. result += s.ToString();
  13. result += "-------------";
  14. }
  15. return Content(result);
  16. }

其中PersonModel定义如下:

  1. public class PersonModel
  2. {
  3. public int id
  4. {
  5. set;
  6. get;
  7. }
  8. public string name
  9. {
  10. set;
  11. get;
  12. }
  13. public int age
  14. {
  15. set;
  16. get;
  17. }
  18. public bool gender
  19. {
  20. set;
  21. get;
  22. }
  23. public string city
  24. {
  25. set;
  26. get;
  27. }
  28. public override string ToString()
  29. {
  30. string s = string.Format(@"id:{0}
  31. name:{1}
  32. age:{2}
  33. gender:{3}
  34. city:{4}
  35. ", id, name, age, gender, city);
  36. return s;
  37. }
  38. }

那么controller方法分别接受单个model和一个model的List。采用通过ajax传递参数。

对于传递单个参数的情况,假设js代码如下:

  1. var person = {
  2. id: "001",
  3. name: "zhangsan",
  4. age: "20",
  5. gender: true,
  6. city: "shanghai"
  7. };
  8. var option = {
  9. url: '/test/ReadPerson',
  10. type: 'POST',
  11. data: person,
  12. dataType: 'html',
  13. success: function (result) { alert(result); }
  14. };
  15. $.ajax(option);

从chrome中截图可以看到如下:

传递的数据是一串Form数据,根据命名匹配的原则,也是可以取得数据的。


将option 的代码改成如下

  1. var option = {
  2. url: '/test/ReadPerson',
  3. type: 'POST',
  4. data: JSON.stringify(person),
  5. dataType: 'html',
  6. success: function (result) { alert(result); }
  7. };
  8. $.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

看请求头的截图:

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


将将option 的代码改成如下

  1. var option = {
  2. url: '/test/ReadPerson',
  3. type: 'POST',
  4. data: person,
  5. dataType: 'html',
  6. contentType: 'application/json',
  7. success: function (result) { alert(result); }
  8. };

把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。

如果把processData设置为false。

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


因此,把option改成:

  1. var option = {
  2. url: '/test/ReadPerson',
  3. type: 'POST',
  4. data:JSON.stringify(person),
  5. dataType: 'html',
  6. contentType: 'application/json',
  7. success: function (result) { alert(result); }
  8. };

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


对于较为简单是数据类型,有时候不指定contentType也能通过命名匹配传值。但是对于稍微复杂点的数据类型,有时指定contentType: 'application/json',处理起来更加方便。

如果一个controller里的action方法是接受一个List类型的参数,比如:

public ActionResult ReadPersons(List<PersonModel> model)

那么js中先构造这样的一个json对象的数组。如下

  1. var persons = [{
  2. id: "001",
  3. name: "zhangsan",
  4. age: "20",
  5. gender: true,
  6. city: "shanghai"
  7. },
  8. {
  9. id: "002",
  10. name: "lisi",
  11. age: "21",
  12. gender: false,
  13. city: "beijing"
  14. }
  15. ];

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

  1. var jsonp = { model: persons };
  2. var option = {
  3. url: '/test/ReadPersons',
  4. type: 'POST',
  5. data: jsonp,
  6. dataType: 'html',
  7. success: function (result) { alert(result); }
  8. };

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

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

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

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

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

  1. var option = {
  2. url: '/test/ReadPersons',
  3. type: 'POST',
  4. data: jsonp,
  5. dataType: 'html',
  6. contentType: 'application/json',
  7. success: function (result) { alert(result); }
  8. };

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

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

  1. var option = {
  2. url: '/test/ReadPersons',
  3. type: 'POST',
  4. data: JSON.stringify(persons),
  5. dataType: 'html',
  6. contentType: 'application/json',
  7. success: function (result) { alert(result); }
  8. };

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


最后,此处再演示一个更复杂的参数类型,以便加深理解。

首先看一下Controller中的方法签名,TestClassB 和一个TestClassA的List。稍显复杂。

  1. public ActionResult Fortest(TestClassB TB,List<TestClassA> TA)
  2. {
  3. string result = "";
  4. return Content(result);
  5. }

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

  1. public class TestClassA
  2. {
  3. public string a1 { set; get; }
  4. public List<string> a2 { set; get; }
  5. }
  6. public class TestClassB
  7. {
  8. public string b1 { set; get; }
  9. public InnerTestClassC ITCC { set; get; }
  10. public class InnerTestClassC
  11. {
  12. public List<int> c1 { set; get; }
  13. }
  14. }

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

  1. $("#btn").click(function () {
  2. var jsondata = { TB: {}, TA: [] };
  3. jsondata.TB.b1 = "b1";
  4. jsondata.TB.ITCC = {};
  5. jsondata.TB.ITCC.c1 = new Array(1, 2, 3, 4);
  6. var ta1 = {};
  7. ta1.a1 = "a1";
  8. ta1.a2 = new Array("a", "b", "x", "y");
  9. var ta2 = {};
  10. ta2.a1 = "a2";
  11. ta2.a2 = new Array("a2", "b2", "x2");
  12. jsondata.TA.push(ta1);
  13. jsondata.TA.push(ta2);
  14. var option = {
  15. url: '/test/Fortest',
  16. type: 'POST',
  17. data: JSON.stringify(jsondata),
  18. dataType: 'html',
  19. contentType: 'application/json',
  20. success: function (result) { alert(result); }
  21. };
  22. $.ajax(option);
  23. });

最终,发送出去的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串后,就能自动的匹配参数了。具体得到的参数如下截图:


总结:

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字符串作为发送数据,这样可读性更好,并且对于复杂的函数签名,也能起到很好的匹配。

再谈Jquery Ajax方法传递到action相关推荐

  1. java ajax传递到action_再谈Jquery Ajax方法传递到action(转)

    假设 controller中的方法是如下: public ActionResult ReadPerson(PersonModel model) { string s = model.ToString( ...

  2. ajax带参数get,使用jQuery ajax方法传递GET参数

    我想使用jQuery ajax方法来处理表单.在我调用的php脚本(myScript.php)中,我想使用通过在PHP脚本中提交表单设置的GET值,但它没有正确传递.使用jQuery ajax方法传递 ...

  3. Jquery Ajax方法传值到action

    假设cshtml文件中是这样的: <script type="text/javascript">$(document).ready(function(){$(" ...

  4. ajax webservice 参数类型,JQuery Ajax WebService传递参数的简单实例

    Asp.NET中利用jQuery实现Ajax时,在服务器端可以使用aspx,ashx,以及WebService等方式.最近研究了一下WebService方式,jQuery Ajax 方法调用 jQue ...

  5. jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例

    本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 封装 jquery ajax 文件/** * 封 ...

  6. jquery ajax html方法吗,jQuery ajax方法

    jQuery AJAX 方法 jQuery load() 方法是简单强大的AJAX方法.从服务器加载数据,并将数据显示在被选中元素中. 语法: $(selector).load(URL,data,ca ...

  7. mvc jquery ajax方法,asp.net mvc-如何在jQuery $ .ajax()中将模型发送请求到MVC控制器方法...

    asp.net mvc-如何在jQuery $ .ajax()中将模型发送请求到MVC控制器方法 在使用以下代码进行自动刷新时,我假设执行发布后,模型将自动发送给控制器: $.ajax({ url: ...

  8. jQuery Ajax 方法调用 Asp.Net WebService 的详细例子

    这很常用,搜索了一下博客园的"找找看"和谷歌,看到大部分都是转载于一两篇文章(而且来源还不是博客园),有的是简单的说一点无法运行,给初学者的调试和学习带来不方便,我在这里将jQue ...

  9. jquery ajax json传递数组,jQuery ajax 传递JSON数组到Spring Controller

    jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...

最新文章

  1. opencv3.4.1 vs2017 鼠标停在 Mat 上 vs卡死
  2. mysql临时表是什么意思_来谈谈MySQL的临时表,到底是个什么东西,以及怎么样产生的...
  3. 面试题:SSH 和 SSM 两个框架的浅显的区别?
  4. URLCache探索
  5. python 数组和列表的区别
  6. 推荐系统(recommender systems):预测电影评分--构造推荐系统的一种方法:协同过滤(collaborative filtering )...
  7. 密码学原理与实践_浅谈SSH2工作原理
  8. 信息系统项目管理师进度管理论文范例
  9. 光伏发电能转计算机专业,光伏发电系统
  10. Intel CPU参数查询网站
  11. 教你简单制作视频滚动字幕
  12. matlab portcons,马科维茨投资组合理论(均方模型)学习笔记——基于Matlab(二)...
  13. ANSYS License管理器程序的步骤-Windows版
  14. 小白对于Linux的学习
  15. 一个具有一些功能的网络画图板
  16. 跳槽字节跳动,从新手到Flutter架构师,一篇就够!深度好文
  17. 如何在SYSTEM权限下实现屏幕监控
  18. 分布式架构优缺点以及设计
  19. MySQL 笛卡尔集
  20. 【CE入门教程】使用Cheat Engine(CE)修改游戏“植物大战僵尸”之其他篇

热门文章

  1. pycharm新建py文件时,自动补充文件头注释信息
  2. 【LOJ】#2887. 「APIO2015」雅加达的摩天楼 Jakarta Skyscrapers
  3. 关于redis连接池
  4. java解析xml实例——获取天气信息
  5. 用Indy创建收发电子邮件的例子
  6. 编译asp.net文件为dll文件
  7. 多段实例代码详解7大类Python运算符,建议收藏!
  8. 2021年,朋友圈都在传这8个视频
  9. 玄姐出品:想和兄弟、集美们聊聊“分布式CAP”中情侣的纠缠故事,真是剪不断 理还乱!...
  10. 左耳朵耗子:15条有效提高编程的小贴士