Jquery下Json資料的傳遞與解析(asp.net mvc與asp.net api下後台json接收方式的不同)asp.net webapi下json傳值方式Jquery.ajax不能解析json

文章目錄

• Asp.net webapi Differences with MVC
• Asp.net webapi Differences with MVC

可同時參見這篇文章  asp.net webapi下json傳值方式

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

網路上大量使用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 字元串、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

 

 

下面說一下，最近在使用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 字元串、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