MVC使用ajax非同步重新整理時怎樣輸出從後臺中傳過來的JSON資料
前言 這幾天在學習MVC使用AJAX非同步刷，因為是新手。所以在js中傳引數到後臺以及後臺返回資料到前臺怎麼接受，怎麼前臺遍歷出JSON資料都開始不知道，相信新手在使用時跟我一樣會遇到，這裡我就和大家分享一下。新手勿噴。。。 這裡使用VS2010中新建的mvc 3.0專案來舉例說明 1、傳遞的是單個物件型別 先看後臺action方法 public ActionResult GetValue(){ChangePasswordModel model1 = new ChangePasswordModel
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的取值方式是一樣
http://www.bingfengsa.com/info/19643.html