正文

MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据

IP云
IP云V管理员/2 阅读
06/17
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

这几天在学习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的取值方式是一样