Json

文章源地址

         最近一直做些asp.net mvc的頁面，每次前端與後端交互，都要baidu查下代碼怎麼寫，也不去思考爲什麼這麼寫，導致每每寫這代碼，都需要下search下代碼。

正好現在有點空閒時間，我就把我寫的代碼整理下，做個記錄。並且把自己的思路理理清楚。內容比較簡單，希望也能對大家有點幫助。

         先介紹下Json，Json是一種輕量級的數據交換格式，採用完全獨立於語言的文本格式，是理想的數據交換格式。

 在JSON中，有兩種結構：對象和數組。

1.對象

一個對象以“{”開始，“}”結束。每個“key”後跟一“:”，“‘key/value’ 對”之間運用 “,”分隔。

person = {"name":"jack", "password":"123"}

2.數組

數組是值的有序集合。一個數組以“[”開始，“]”結束。值之間運用 “,”分隔

person= [{"name":"jack", "password":"123"}, {"name":"tony", "password":"321"}];

先區分下JSON字符串和JSON對象（在數據傳輸流程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，

所以，JSON對象和JSON字符串之間的相互轉換是關鍵。）

1. JSON字符串

var jsonStr = '{"name":"jack", "password":"123"}';  由於在Js中單引號和雙引號都可以表示一個字符串，單引號也可以換成雙引號

2. JSON對象

var jsonObj = {"name":"jack", "password":"123"};

Json字符串轉換爲Json對象

第一種方法

var myObject = eval('(' + jsonStr+ ')');

eval是js自帶的函數,但是不太安全，因爲jsonStr可能不是合法的json字符串，如果是別的js代碼，也會被執行。

第二種方法

var myObject = JSON.parse(jsonStr);

它可以把json字符串轉換爲json對象，供給js調用。

Json對象轉Json字符串

var jsonString = JSON.stringify(myObject);

json對象也可以是數組，可以是js對象字面量

對Json對象的操作

1. 遍歷JSON對象

myJson = {"name":"jack", "password":"123"};
for(var p in myJson){//遍歷json對象的每個key/value對,p爲key
alert(p + " " + myJson[p]);
}

2. 遍歷JSON數組

persons = [
{"name":"jack", "password":"123"},{"name":"tony", "password":"321"}];
for(var p in persons ){
//遍歷json數組時，這麼寫p爲索引，0,1
alert(persons[p].name + " " + persons [p].password);} 

或者

``` for(var i = 0; i < packJson.length; i++){ alert(packJson[i].name + " " + packJson[i].password); } ```

客戶單通過Ajax提交Json數據格式

function SearchHeadList() {
        var jsondata = '{'
                + '"StartDate":' + '"' + $("#StartDate").val() + '",'
                + '"EndDate":' + '"' + $("#EndDate").val() + '",'
                + '"AreaCode":' + '"' + $("#AreaCode").val() + '",'
                + '"ShelfCode":' + '"' + $("#ShelfCode").val() + '",'
                + '"LocID":' + '"' + $("#LocID").val() + '"}';
 
        $.ajax({
            type: "POST"
                , url: '@Url.Action("PdHeadListPartial", "CloudProdCheck")'
                , data: jsondata
                , contentType: "application/json"
                , success: function (result) {
                    $("#headList").html(result);
                }
        });
    }

上面是我的一個代碼片段，先把值封裝成json字符串，再發送到服務端。

這裏我經過幾次測試，當data傳遞的是json對象，或者別的js對象時，提交會報錯，無效的json基元。

當查看生成的request header請求時，Request Payload的值是“StartDate=2011-05-04&EndDate=2016%2F5%2F17&AreaCode=&ShelfCode=&LocID=”

而不是json字符串。因爲contentType定義的是json格式，這裏需要傳遞json字符：{StartDate: "2016/5/17", EndDate: "2016/5/17", AreaCode: "", ShelfCode: "", LocID: ""}

深究原因，因爲如果傳遞的是js對象或者json對象，如下面的代碼所示，會對對象進行$.param()的處理，生成key=value&key1=value1的格式的字符串。

//在ajax()方法中，對json類型的數據進行了$.param()處理
if ( s.data && s.processData && typeof s.data !== "string" ) {
    s.data = jQuery.param( s.data, s.traditional );
}
 
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
        // Serialize the form elements
        jQuery.each( a, function() {
            add( this.name, this.value );
        });
 
    } else {
        // If traditional, encode the "old" way (the way 1.3.2 or older
        // did it), otherwise encode params recursively.
        for ( prefix in a ) {
            buildParams( prefix, a[ prefix ], traditional, add );
        }
    }

當然，如果你希望傳遞key=value&key1=value1這樣的字符串給服務端，那contentType需要轉化爲application/x-www-form-urlencoded格式，而不是json格式。

服務端Controller中的方法

public ActionResult PdHeadListPartial(PDSearchInfo info)

因爲是json格式提交的數據，所以需要定義相對應的對象去解析它

public class PDSearchInfo
  {
        public string LocID { get; set; }
 
        public string ShelfCode { get; set; }
 
       public string AreaCode { get; set; }
 
 
        public string Creator { get; set; }
 
        public string StartDate { get; set; }
 
        public string EndDate { get; set; }
}

這個 mvc框架自動會幫你做掉，只要你的對象與傳遞過來的json字符串能轉換。

另外，有時候我們不使用json數據交換的時候，ajax提交和服務端的接收就需要改一下。

1. POST方式提交key=value&key1=value1這樣的字符串

這樣ajax代碼需變更，如下

function SearchHeadList() {
        var jsondata = '{'
                + '"StartDate":' + '"' + $("#StartDate").val() + '",'
                + '"EndDate":' + '"' + $("#EndDate").val() + '",'
                + '"AreaCode":' + '"' + $("#AreaCode").val() + '",'
                + '"ShelfCode":' + '"' + $("#ShelfCode").val() + '",'
                + '"LocID":' + '"' + $("#LocID").val() + '"}';
 
        var jsonObj = JSON.parse(jsondata);
 
        $.ajax({
            type: "POST"
                , url: '@Url.Action("PdHeadListPartial", "CloudProdCheck")'
                , data: jsonObj
                , contentType: "application/x-www-form-urlencoded" 
                //post的時候格式必須爲application/x-www-form-urlencoded，這個也是ajax的默認格式。
                , success: function (result) {
                    $("#headList").html(result);
                }
        });
    }

注意，contentType格式需要爲application/x-www-form-urlencoded，否則服務端Request.Form中沒有數據。

服務端獲取請求的參數

針對post請求，需要通過Request.Form去獲取參數。

2. Get方式提交key=value&key1=value1這樣的字符串

客戶端只需要把type改成Get，服務端需要通過Request.QueryString去獲取請求參數

以上就是我對ajax，json，服務端asp.net mvc交互的總結，希望能對大家有所幫助。