前臺取得後臺返回的json數據！

一、傳遞的是單個對象類型

先看後臺action方法

public ActionResult GetValue() 
{ 
ChangePasswordModel model1 = new ChangePasswordModel(); 
model1.OldPassword = "111"; 
model1.NewPassword = "222";

   return this.Json(model1);//返回對象到前臺

}

這樣返回的model1對象就會傳遞到result中去，前臺能夠直接使用result.NewPassword來取值

以下

$.ajax( 
{ 
url: "GetValue", //表示提交給的action 
type: "post",   //提交方法 
datatype: "json",//數據類型

success: function (result) { //返回的結果自動放在resut裏面了

alert(result.NewPassword); 
} 
});

二、傳遞的是對象數組也就是List集合，這裏演示遍歷數據，並異步刷新表格

後臺獲取對象集合

public ActionResult GetValue() 
{

StudentService studentservice = new StudentService(); 
string studentlist= studentservice.SelectAll(); 
return this.Json(studentlist);

}

前臺獲取數據並刷新表格

<script type="text/javascript"> 
function shuxin() {

$.ajax( 
{ 
url: "GetValue", 
type: "post", 
datatype: "json", 
success: tableappend(result) //成功則執行表格刷新函數 
}); 
} 
 //動態刷新表格 
function tableappend(result) { 
var studentlist = eval(result);

 for (var i = 0; i < studentlist.length; i++) { 
//建立tr對象 
 var addtr = document.createElement("tr");

//行中建立三個td對象，並把studentlist中的值賦給它 
var addtd1 = document.createElement("td"); 
addtd1.innerHTML = studentlist[i].sanme; 
 var addtd2 = document.createElement("td"); 
 addtd2.innerHTML = studentlist[i].sage; 
 var addtd3 = document.createElement("td"); 
 addtd3.innerHTML = studentlist[i].sex;

 //把建立的td對象加入tr中去 
 addtr.appendChild(addtd1); 
 addtr.appendChild(addtd2); 
 addtr.appendChild(addtd3); 
// 
//把tr加入table中去 
 document.getElementById("retable").appendChild(addtr); 
 } 
 } 
</script>

三、參數傳遞（另外的代碼例子說明)

對於單個參數傳遞或者不一樣對象的參數能夠直接使用{"key":value};的方式來傳值

 

 $.ajax(
                     {

                         url: "update",

                         type: "post",

                         datatype: "json",

                         data:{"room_id":inputobj[0].innerText,"room_name":inputobj[1].innerText,"room_type":inputobj[2].innerText,

                             "room_limittime": inputobj[3].innerText, "username": inputobj[4].innerText, "room_state": inputobj[5].innerText

                         }, 

                         success: function (result) { //返回的結果自動放在resut裏面了

                             if (result) {

                                alter();

                             }

                         }

                     });

後臺使用 FormContext對象來得到參數

public ActionResult Update(FormCollection fc) 
{ 
//獲取前段傳過來的參數 
RoomModel room = new RoomModel(); 
room.RId =Convert.ToInt32(fc["room_id".Trim()]); 
room.RName = fc["room_name".Trim()]; 
room.RType = fc["room_type".Trim()]; 
room.RLendLimitTime = Convert.ToInt32(fc["room_limittime".Trim()]);
}

這裏看到傳遞多個參數的時候，前臺和後臺都很麻煩，能不能像頁面表單同樣直接能夠把model對象給傳遞回去Controller呢？

固然這是能夠的

把這些值封裝一下就能夠了,例如

<script type="text/javascript"> 
function shuxin() {

var  model =   { } ; 
model.NewPassword =   "123" ; 
model. OldPassword   =   "456" ;

$.ajax( 
{ 
url: "GetValue", 
type: "post", 
datatype: "json",

data:model,//在把這個對象做爲參數傳過去就能夠了 
success: tableappend(result) //成功則執行表格刷新函數 
}); 
}

 在後臺 直接把model做爲參數 這樣值就會都封裝給了model對象 

public ActionResult update(ChangePasswordModel model) 
{ 
  return View(); 
}

五、apsx和cshtml

JS中對JSON的取值方式是同樣

 

1）mvc4 如何返回Json數據

public static class ObjectExtentions
    {
        /// <summary>
        ///  爲Oject對象增長ToJsonString方法（注意對項目添加Newtonsoft.Json.dll引用）
        /// </summary>
        /// <param name="obj"></param>
        /// <returns></returns>
        public static string ToJsonString(this Object obj)
        {

            JsonSerializerSettings jsSettings = new JsonSerializerSettings();
            jsSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
            return JsonConvert.SerializeObject(obj, jsSettings);
        }
    }

 對你的結果集用一下 return Content(result.ToJsonString());

 

2）前臺中怎麼取它後臺返回的數據！

//綁定數據  
function BindData(userid) {
            if (userid != "") {
                $.getJSON("/System/User/BindUser", { id: userid, randnum: Math.floor(Math.random() * 1000000) }, function (data) {
                    $("#userid").val(data.USERID);
                    $("#txtLoginNo").val(data.LOGINNO);
                    $("#txtPwd").val(data.PASSWORD);
                    $("#txtRePwd").val(data.PASSWORD);
                    $("#txtUserName").val(data.USERNAME);
                    $("#cboGroup").combotree('setValue', data.GROUPID=='0'?'-99':data.GROUPID);
                    $("#txtTel").val(data.TEL);
                    $("#txtMobile").val(data.MOBILE);
                    $("#txtEmail").val(data.EMAIL);
                    $("#txtRemark").val(data.REMARK);
                    $("#cboJobType").combobox('setValue', data.JOBTYPE == null ? '-99' : data.JOBTYPE);
                    $("#cboUserStatus").combobox('setValue', data.USERSTATUS == '0' ? '-99' : data.USERSTATUS);
                });
            }
        }

 

使用淘寶api批量獲取商品信息 http://api.taobao.com/apidoc/api.htm?spm=0.0.0.0.CWaYNg&path=cid:4-apiId:315 taobao.items.list.get 批量獲取商品信息 淘寶返回的是Item[]類型 好比我須要批量獲取到5個寶貝的信息（包含detail_url，num_iid,title3個屬性） 如何將這5條數據，以json的格式輸出到前臺頁面，好比輸出到文本框中（相似淘寶測試工具中那種）

獲取到的數據用JavaScriptSerializer序列化丟給前臺，用Jquery處理

$.ajax({
 type: "GET",
 url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",//利用ajax請求後臺的並返回值
 // data: "json",
 success: function (result) {//result爲後臺返回的值,是json字符串的形式
 // alert(result);
 var obj = JSON.parse(result);//解析json字符串爲json對象形式
 var trStr = '';//動態拼接table
 // var html = '';
 for (var i = 0; i < obj.length; i++) {//循環遍歷出json對象中的每個數據並顯示在對應的td中
 trStr += '<tr class="example">';//拼接處規範的表格形式
 trStr += '<td width="15%" style="display:none" id="user">' + obj[i].NVFID + '</td>';//數據表的主鍵值
 trStr += '<td width="15%">' + obj[i].USERCODE + '</td>';//對應數組表的字段值
 trStr += '<td width="15%">' + obj[i].USERNAME + '</td>';
 trStr += '<td width="15%">' + obj[i].USERPWD + '</td>';
 trStr += '<td>' + obj[i].PHONEIMEI + '</td>';
 trStr += '<td>' + obj[i].BMMC + '</td>';
 /*經典之處，要將主鍵對應的值以json的形式進行傳遞，才能在後臺使用*/
 trStr += "<td><a href='#'style='text-decoration:none' onclick='Delete(\"" + obj[i].NVFID + "\")'>刪除</a><td>";
 trStr += '</tr>';  
 } 
 $("#tbody").html(trStr);//運用html方法將拼接的table添加到tbody中return;
 },
 error: function (error) {
 alert(error);
 }
 });

或者

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
 $("<img/>").attr("src",  item.media.m).appendTo("#images"); 
 if ( i == 3 ) return false; 
}); 
}); 　　

循環能夠用 jQuery .tmpl()