JSON

ajax、json一些整理(2)(2)

字号+ 作者:H5之家 来源:H5之家 2017-07-15 17:01 我要评论( )

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

因此,把option改成:

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

  

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

clipboard[8]_thumb

对于较为简单是数据类型,有时候不指定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的方式传递的,

clipboard

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

clipboard[1]

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

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

  

clipboard[2]

那么传递过去的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格式,因此会出现下面的错误。

clipboard[3]

clipboard[4]


如果设置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数据了

clipboard[5]


最后,此处再演示一个更复杂的参数类型,以便加深理解。
首先看一下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; } } }

  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用Python将excel文件导出成json

    用Python将excel文件导出成json

    2017-07-16 12:00

  • JSON解析器--实现代码

    JSON解析器--实现代码

    2017-07-15 16:00

  • JSON学习---合并Merge,克隆Clone,指向子对象ForcePath

    JSON学习---合并Merge,克隆Clone,指向子对象ForcePath

    2017-07-15 15:01

  • JSON学习笔记(四)

    JSON学习笔记(四)

    2017-07-15 15:00

网友点评