Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

时间:2022-12-10 21:58:08

可同时参见这篇文章  asp.net webapi下json传值方式

纠缠了我几天的一个问题,简单摘抄整理下,希望对大家有帮助。

网络上大量使用json格式传递数据,json传递数据比较轻量,而用json传递数据就要解决两个问题:
1、从服务器回发回来的json格式的字符串该如何处理;
2、如何将json数据提交到服务器并在服务器端解析json数据

范例一:

(asp.net mvc3.0代码,传递简单几个参数数值,后台使用的mvc的model binding方式获取值)

 

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

 

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

 

范例二:

(asp.net mvc 4.0下web api,使用了knockout.js 2.0的代码,传递参数为一个类,viewmodel。 使用的webapi 下的formatters传值方式,后台是从request的body中取值,并且是把整个body作为一个(不可为多个)对象解析为一个参数,故后台需定义一个对于的类结构来匹配前台的传来的复杂数据 类型 )

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

 

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

 

范例三:

(asp.net mvc 4.0下web api,使用了knockout.js 2.0的代码,传递参数为一个包含数组的自定义类型,使用的webapi 下的formatters传值方式 )

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

范例四:

(asp.net mvc 4.0下普通controller判断ajax请求,传递参数为一个拼接的json字符串,使用的webapi 下的formatters传值方式 )

 

1)借助JSON.stringify函数将js对象转成json字符串格式

var bookInfo = new Array();

for (var i in self.dates()) {
var bi = {};
bi["datesNum"] = self.dates()[i].date;
bi["totalPrice"] = self.dates()[i].date;
bi["stylistId"] = self.dates()[i].date;
bookInfo.push(bi);
}
var book = {
book: bookInfo,
name:"11",
};

var bookString=JSON.stringify(book);

2)拼接json字符串

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

//此类用来反序列化客户端json字符串

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

 

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

 

json简单介绍

1、JSON简介及其应用场景

       JSON协议是一种数据传输协议,你也可以把它理解为表达数据协议,JSON与XML不同,JSON只能用来传输数据,而不能用作文档格式。

    JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。

     尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用JavaScript 解析 XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数 Web 应用来说,他们根本不需要复杂的 XML 来传输数据,XML 的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比,返回 HTML 片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。

     现在, JSON 为 Web 应用开发者提供了另一种数据交换格式。让我们来看看 JSON 到底是什么,同 XML 或HTML 片段相比,JSON 提供了更好的简单性和灵活性。

2、JSON语法

和 XML 一样,JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的,因此,JSON 的数据格式非常简单,您可以用 JSON 传输一个简单的 String,Number,Boolean,也可以传输一个数组,或者一个复杂的 Object 对象。

String,Number 和 Boolean 用 JSON 表示非常简单。例如,用 JSON 表示一个简单的 String “ abc ”,其格式为:

"abc"

除了字符 ",\,/ 和一些控制符(\b,\f,\n,\r,\t)需要编码外,其他 Unicode 字符可以直接输出。

Boolean 类型表示为 true 或 false 。此外,JavaScript 中的 null 被表示为 null,注意,true、false 和 null 都没有双引号,否则将被视为一个 String 。

JSON 还可以表示一个数组对象,使用 [] 包含所有元素,每个元素用逗号分隔,元素可以是任意的 Value,例如,以下数组包含了一个 String,Number,Boolean 和一个 null:

["abc",12345,false,null]

 Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的,实际上此处的 Object 相当于 Java 中的 Map<String, Object>,而不是 Java 的 Class 。注意 Key 只能用 String 表示。

例如,一个 Address 对象包含如下 Key-Value:

city:Beijing

 street:Chaoyang Road

 postcode:100025(整数)

 用 JSON 表示如下:

{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

 其中 Value 也可以是另一个 Object 或者数组,因此,复杂的 Object 可以嵌套表示,例如,一个 Person 对象包含name 和 address 对象,可以表示如下:

{"name":"Michael","address":

    {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

}

 

json格式的常见问题

1)Jquery.ajax不能解析json对象,报Invalid JSON错误的原因和解决方法

 我们知道Invalid JSON错误导致的json对象不能解析,一般都是服务器返回的json字符串的语法有错误。这种情况下,我们只需要仔细的检查一下json就可以解决问题。

下面说一下,最近在使用jquery 1.4中使用$.ajax()方法解析json对象遇到的问题。

 Json对象是:

 [{name:'二手房出售',infoCount:0,pageUrl:'/ershoufang'},{name:'二手房求购',infoCount:0,pageUrl:'/qiugou'},{name:'二手房装修',infoCount:0,pageUrl:'/esfzhuangxiu'},{name:'二手回收',infoCount:0,pageUrl:'/huishou'},{name:'二手摩托车',infoCount:0,pageUrl:'/motor'},{name:'二手汽车求购',infoCount:0,pageUrl:'/ershoucheqg'},{name:'二手汽车转让',infoCount:9,pageUrl:'/ershouche'},{name:'二手市场',infoCount:0,pageUrl:'/ershoushichang'}]

 不知道大家有没有发现这段json对象的问题。这样的写法在js脚本和jquery 1.4之前的版本都是没有问题的。因为在1.3及更早版本中,jQuery通过javascript的eval方法来解析json对象。在1.4中,jQuery使用了更严格的方法来解析json。所有的内容都必须使用双引号。

 这点从jQuery.parseJSON(json) 可以看出,parseJSON在文档中的解释是:

接受一个JSON字符串,返回解析后的对象。

传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串: 
{test: 1} ( test 没有包围双引号)
{'test': 1} (使用了单引号而不是双引号)

另外,如果你什么都不传入,或者一个空字符串、null或undefined,parseJSON都会返回 null 。

凡是字符串都需要用双引号扩起来,数字,null,true,false不用而已

来自 http://www.cnblogs.com/hyl8218/archive/2010/03/26/1694082.html

 2)传入的对象无效,应为“:”或“}”。

还是传入的json字符串格式有问题,特殊字符如“引号需编码。

.NET后台获取前台JQUERY AJAX传递JSON数组的问题 

页面脚本:
var people = [{ "UserName": "t1", "PassWord": "111111", "Sex": "男" }, { "UserName": "t2", "PassWord": "222222", "Sex": "女"}];

我想把这个前端拼凑的JSON脚本发送后HANDLER后台。
$("#btnSend").bind("click", function() {
  $.post("a.ashx", people, function(data, returnstatus) { }, "json");
  });

后台应该如何接受啊,平时一般形式 都是CONTENT.Request【“参数”】 接受,但这个是JSON数组 如何接受呢?

方案一:去www.json.org下载JSON2.js
再调用JSON.stringify(JSONData)将JSON对象转化为JSON串。
var people = [{ "UserName": "t1", "PassWord": "111111", "Sex": "男" }, { "UserName": "t2", "PassWord": "222222", "Sex": "女"}];

再构造URL回传给服务器端:
$("#btnSend").bind("click", function() {
  $.post("a.ashx", {xxxx:JSON.stringify(people)}, function(data, returnstatus) { }, "json");
  });

服务器端解析传回的json字符串(注意格式问题

服务器如何解析传回来的json数据?

引用一段描述:

Asp.net webapi Differences with MVC

Here are some differences between MVC and WebAPI’s parameter binding:

  1. MVC only had model binders and no formatters. That’s because MVC would model bind over the request’s body (which it commonly expected to just be FormUrl encoded), whereas WebAPI uses a serializer over the request’s body.
  2. MVC buffered the request body, and so could easily feed it into model binding. WebAPI does not buffer the request body, and so does not model bind against the request body by default.
  3. WebAPI’s binding can be determined entirely statically based off the action signature types. For example, in WebAPI, you know statically whether a parameter will bind against the body or the query string. Whereas in MVC, the model binding system would search both body and query string.

 

rc版的webapi参数绑定器分为两种:

 

1.Model Binding
2.Formatters 其中Model Binding仅从url中取值,这点是与mvc的model binding有区别的,formatters是从request的body中取值,并且是把整个body作为一个(不可为多个)对象解析为一个参数,后台需相对应的为前台传递的复杂类型定义一个对应的类。而mvc下的model binding系统会同时查询body和querystring下的数据并匹配。

 

webapi是如何从这两种方式选择呢?

 

1.默认情况下是根据参数的类型,如果参数为简单类型(字符串、整数、浮点、时间类型等),则使用model binding,如果是复杂类型(自定义的类,包括一个或多个字段)等,则用formatters

 

2.可以给参数加上[FromBody]属性,则使用formatters

 

3.可以给参数加上[ModelBinder]属性,则使用model binding,而且可以此属性允许你指定用自定义的绑定器,也可以使用[FromUri]属性来使用model binding

 

4.特别注意一点,一个action上,只能有一个参数使用formatters,否则会在运行时抛出异常

 

JSON.stringify 功能

 参见 http://technet.microsoft.com/zh-cn/sysinternals/cc836459(v=vs.94)

序列化一个JavaScript 值对 JavaScript 对象表示法 (json) 文本。

JSON.stringify(value [, replacer] [, space])

JSON.parse 功能

参加 http://technet.microsoft.com/zh-cn/sysinternals/cc836466(v=vs.94)

将 JavaScript 对象生成JavaScript 值的表示法 (json) 文本。

JSON.parse(text [, reviver])

 

最后补充一个完整的json数据传递实例

jquery ajax json传递数据浅析(注:使用的mvc下的model binding方式)

来自 http://www.aichengxu.com/article/Javascript/664_7.html