MVC使用ajax異步刷新時怎樣輸出從后台中傳過來的JSON數據

前言

這幾天在學習MVC使用AJAX異步刷，因為是新手。所以在js中傳參數到后台以及后台返回數據到前台怎么接受，怎么前台遍歷出JSON數據都開始不知道，相信新手在使用時跟我一樣會遇到，這里我就和大家分享一下。新手勿噴。。。

這里使用VS2010中新建的mvc 3.0項目來舉例說明

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

先看后台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);
}
});

2、傳遞的是對象數組也就是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>

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

對於單個參數傳遞或者不同對象的參數可以直接使用{"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();
}

5、apsx和cshtml

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