MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
2014-03-15 18:34
786 查看
前言
这几天在学习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的取值方式是一样
这几天在学习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的取值方式是一样
相关文章推荐
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- 使用ajax接收后台发送过来的json数据
- 使用ajax接收后台发送过来的json数据方法
- 使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
- 给ajax留一个模板,通过后台传递json获取数据,并用table显示,方便以后使用
- 使用 AJAX 请求来获得 JSON 数据,并输出结果:
- Spring MVC Maven 使用ajax传json数据
- 在struts2+jquery使用AJAX异步提交数据,处理返回的json数据
- 《AJAX学习心得分享-------(三)AJAX+JSON无刷新加载大量后台数据》
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
- Ajax异步从后台取Json数据
- Maven项目:Spring MVC + Ajax + Json + RequestBody:POST后台服务器接收前端JSON数据并注解到POJO内
- 使用Freemarker+springMVC时用Ajax加载数据,已经后台执行了,但是跳转到前台的时候报错
- ajax实现异步刷新,并通过json接收发送数据!
- [SoOnPerson]使用vue.js 来输出ajax返回的json数据
- ajax异步刷新得到json数据
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
- ajax接收java后台传过来的json数据乱码及获取字段undefind问题
- asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
- 不是java的--如何使用ajax将json传入后台数据