Jquery下Json數據的傳遞與解析(asp.net mvc與asp.net api下后台json接收方式的不同)

本文轉載自查看原文 2012-07-30 16:50 12287 web前端之html，dom，js，css，jquery，json/ MVC Web Api Razor/ ASP.NET/ Ajax

糾纏了我幾天的一個問題，簡單摘抄整理下，希望對大家有幫助。

網絡上大量使用json格式傳遞數據，json傳遞數據比較輕量，而用json傳遞數據就要解決兩個問題：
1、從服務器回發回來的json格式的字符串該如何處理；
2、如何將json數據提交到服務器並在服務器端解析json數據

范例一：

（asp.net mvc3.0代碼,傳遞簡單幾個參數數值，后台使用的mvc的model binding方式獲取值）

范例二：

（asp.net mvc 4.0下web api，使用了knockout.js 2.0的代碼，傳遞參數為一個類，viewmodel。使用的webapi 下的formatters傳值方式，后台是從request的body中取值，並且是把整個body作為一個（不可為多個）對象解析為一個參數，故后台需定義一個對於的類結構來匹配前台的傳來的復雜數據類型）

范例三：

（asp.net mvc 4.0下web api，使用了knockout.js 2.0的代碼，傳遞參數為一個包含數組的自定義類型，使用的webapi 下的formatters傳值方式）

范例四：

（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字符串

//此類用來反序列化客戶端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:

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.
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.
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，否則會在運行時拋出異常