前言

这几天在学习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数据的更多相关文章

  1. SpringMVC中出现" 400 Bad Request "错误(用@ResponseBody处理ajax传过来的json数据转成bean)的解决方法

    最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@Respon ...

  2. ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request 不进入controller

    今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语 ...

  3. AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  4. IE内核发送ajax请求时不会将url中的参数编码

    有一次用户遇到创建文件,名称为中文时乱码的问题. 经调查,发现用户使用的是国产浏览器ie模式 抓取请求发现 IE: 键 值请求 POST /Handlers/CreateTxtFile.ashx?fi ...

  5. js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

    今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...

  6. MVC中利用ViewBag传递Json数据时的前端处理方法

    用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval() ...

  7. 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据

    1:跨域请求handler一般处理程序 using System; using System.Collections.Generic; using System.Web; using System.W ...

  8. MVC之Ajax.BeginForm使用详解之更新列表 mvc验证jquery.unobtrusive-ajax

    MVC之Ajax.BeginForm使用详解之更新列表   1.首先,请在配置文件设置如下:(该项默认都存在且为true) <add key="UnobtrusiveJavaScrip ...

  9. 关于MVC接收Ajax调用无法访问的问题

    例如:下面代码有两个int类型的参数,如果Ajax调用时没有在data属性中为其赋值,AJAX会出500异常. public JsonResult GetList(int pageIndex, int ...

随机推荐

  1. code

    using System;using System.Threading; namespace ThreadLocalTest{    public class MyObject    {       ...

  2. APNS 远程推送通知 PUSH deviceToken

    服务器向客户端推送消息:      当应用程序推到后台,或者根本就没有运行(我们的代码无能为力)      如果这种情况之下,应用程序想和用户交互(传统的做法 不可能)      推送 APNS:Ap ...

  3. Redis命令拾遗三(列表List类型)

    本文版权归博客园和作者吴双本人共同所有.转载和爬虫请注明原文地址 Redis五种数据类型之列表类型 Redis五种数据类型之列表类型.你可以存储一个有序的字符串列表一类数据.比如你想展示你所存储的所有 ...

  4. svn+teamcity+YouTrack+Upsource搭建—写给明天工作室的小伙伴

    首先解释下概念: SVN:Subversion的简称,版本控制系统.采用集中式管理(本地只保留服务器仓储的副本,想要把代码交到服务器或者看提交记录.差异对比就必须得有网络连接) Teamcity:可持 ...

  5. JDBC 制作简单的登录验证

    两种方法: 一.直接拼接到SQL语句 public static void main(String[] args) throws Exception{ //输入账号密码 Scanner sc = ne ...

  6. stm32新建工程详细步骤

    记得好早以前为了建一个keil的工程折腾了好久,在这里写写基本的Keil工程创建方法,以防自己以后再忘记: 新建工程 保存工程 选择器件 在这边新建文件夹,然后就是添加程序代码到里面去了.其中一些文件 ...

  7. java中的switch case

    switch-case语句格式如下 switch(变量){ case 变量值1: //; break; case 变量值2: //...; break; ... case default: //... ...

  8. spring的依赖注入,为什么用接口的实现类而不是父类的继承类?

    @Resource private EmployeeService employeeService; public void setEmployeeService(EmployeeService em ...

  9. VBA 格式化字符串 - Format大全

    VBA 格式化字符串 VBA 的 Format 函数与工作表函数 TEXT 用法基本相同,但功能更加强大,许多格式只能用于VBA 的 Format 函数,而不能用于工作表函数 TEXT ,以下是本人归 ...

  10. ArcGIS Engine开发前基础知识(2)

    ArcGIS基本控件简介 ArcGIS Engine控件是一组可视化的开发组件,每个ArcGIS Engine控件都是一个COM组件.这些组件包括MapControl,PageLayoutContro ...