JQuery.Ajax()的data参数传递方式

最近,新学c# mvc,通过ajax post方式传递数据到controller。刚开始传递参数,controller中总是为null。现记录一下,可能不全,纯粹记个学习日记。

重点在于参数的方式,代码为例子

1、这里  dataType: "json",表示返回的格式是json

前端:  var saveAlbum = function () {

            $.ajax(
            {
                url: "/Home/PostAlbum",
                type: "POST",
                dataType: "json",
                data: { AlbumName: "shanghai", Entered: "5/9/2013" },
                success: function (result) {
                    alert(result);
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err);
                }
            });
        }
 controller: 

public ActionResult PostAlbum(test test)
        {
            string str = String.Format("保存成功PostAlbum:{0} {1:d}", test.AlbumName, test.Entered);
            return Json(str);//--------对应请求中dataType: "json",表示需要返回json类型
            //return String.Format("保存成功PostAlbum:{0} {1:d}", test.AlbumName, test.Entered);//------如果是string,则会报错
        }

2、ajax请求中还要一个重要的参数: contentType: "application/json",表示传入参数的格式

 var saveAlbumJson = function () {

            $.ajax(
            {
                url: "/Home/PostAlbum",
                type: "POST",
                contentType: "application/json",
                dataType:"json",
                data: JSON.stringify({ "AlbumName": "shanghai", "Entered": "5/9/2013" }),
                success: function (result) {
                    alert(result);
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err);
                }
            });
        }
 [HttpPost]
        public ActionResult PostAlbum(test test)
        {
            string str = String.Format("保存成功PostAlbum:{0} {1:d}", test.AlbumName, test.Entered);//传入test实体
            return Json(str);
            //return String.Format("保存成功PostAlbum:{0} {1:d}", test.AlbumName, test.Entered);
        }
 public class test
    {
        public string AlbumName { get; set; }
        public DateTime Entered { get; set; }
    }

3、如果要传入list<实体>,比如List<test>,需要把传入的data做转换

   var saveAlbumJsonList = function () {
            $.ajax(
            {
                url: "/Home/AlbumList",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({"input":[{ AlbumName: "shanghai", Entered: "5/9/2013" },{...},{....}]}),
                success: function (result) {
                    alert(result);
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err);
                }
            });
        }
  public ActionResult PostAlbumList(List<test> input)//input必须要与data中数组中的key匹配
        {
            if (input != null)
            {
                string str = String.Format("保存成功PostAlbum:{0} {1:d}", input[0].AlbumName, input[0].Entered);
                return Json(str);
            }else
            {
                return Json("参数获取错误!");
            }
            //return String.Format("保存成功PostAlbum:{0} {1:d}", test.AlbumName, test.Entered);
        }

4、由上面三个例子,很容易想到,传入多个list<实体>的方式

  function postEmployees() {
            $.ajax({
                type: "POST",
                url: "/Home/Employees",
                contentType: "application/json",
                dataType: "json",
                async: false,
                data: JSON.stringify({
                    "Employees": [{ "Id": "1", "lastName": "Gates" }, { "Id": "2", "lastName": "Bush" }, { "Id": "3", "lastName": "Carter" }],
                    "Employers": [{ "Id": "4", "lastName": "Gates" }, { "Id": "5", "lastName": "Bush" }, { "Id": "6", "lastName": "Carter" }]
                }),
                success: function (jsonResult) {
                    alert(jsonResult);
                }
            });
        }
  [HttpPost]
        public async Task<ActionResult> Employees(List<Employee> Employees, List<Employee> Employers)
        {
            return Json("Employees", JsonRequestBehavior.AllowGet);
        }
 public class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }

        public string LastName { get; set; }
    }
时间: 2024-10-09 18:38:23

JQuery.Ajax()的data参数传递方式的相关文章

JQuery.Ajax()的data参数类型

假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>:<input type='text' name='uname' id='uname'><br> <label for='mobileIpt'>手机号:</label><input type='text'

关于Jquery中ajax方法data参数用法的总结

jquery手册描述: data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQuery 将自动为不同值对应同一个名称.如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'. 示例: $.ajax({    type: "POST",    u

jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz

jQuery ajax的traditional参数的作用 i33 发布时间: 2013/04/03 10:05 阅读: 9859 收藏: 9 点赞: 1 评论: 0 一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: $.ajax{ url:"xxxx", data:{ p: "123,456,789" } } 然后后台获取参数后再分隔,这种做法有很大弊端,试问如果某一个参数值中出现了分隔符所使用的字符,会

jQuery.ajax()方法中参数详细解析

前言 在项目开发中,为了实现异步向服务端发起请求,最经常使用的就是jQuery.ajax方法了.刚开始需求比较简单,调用jQuery.ajax方法时要传的参数也就那几个常见的参数:url/data/dataType/type/cache/timeout.当时感觉这个接口使用起来很简单,直到最近项目中要实现一个发送 formData数据到服务端的需求时,我发现自己错了....原来jQuery.ajax方法中除了我用过的那几个外,还有如此之多!!于是我决定要去jQuery官网好好看看都有哪些我不知道

jQuery Ajax Post Data Example

http://www.formget.com/jquery-post-data/ jQuery Ajax Post Data Example Fugo Of FormGet jQuery $.post() method is used to request data from a webpage and to display the returned result (sent from requested page) on to that webpage from where the reque

jQuery ajax的traditional参数的作用

一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: $.ajax{ url:"xxxx", data:{ p: "123,456,789" } } 然后后台获取参数后再分隔,这种做法有很大弊端,试问如果某一个参数值中出现了分隔符所使用的字符,会出现什么情况呢?当然后台获取的参数将与实际情况不符.  这时我想到了将上述代码写成这样: $.ajax{ url:"xxxx", data:{ p

jQuery.ajax()的相关参数及使用

jQuery.ajax(),有很多项参数,小弟菜鸟级别,有时候想不起来,现在记录下来便于以后查看,也欢迎大神指正. 常用的几类,可以称为模板样式写法: $.ajax({ url: "url", //请求的url地址 dataType: "json", //返回格式类型为json async: true, //请求是否异步,默认为true:异步,这也是ajax重要特性 data: { "id": "value" }, //传参的

jQuery ajax传递特殊字符参数(例如+)

使用jQuery ajax向后台传递参数para=1+1时后台接收到的参数为para=1 1,解决方案是 使用json传递,代码如下. var url = "/test/check"; $.ajax({ type: "post", url: url, // data: "para=1+1", data为字符串时 后台接收到的参数为 1 1 data: {"para":1+1}, // data为json数据时 后台接收到的参数

jQuery ajax中的参数含义

所有options均可选,下面简要说明每个option 1.async 默认为true,即请求为异步请求,这也是ajax存在的意义.但同时也可以将这个参数设置为false,实现同步请求.(同步请求会锁定浏览器,直到这个请求结束后才可以执行其他操作) 2.bforeSend(XHR) 这个方法是用来在发送请求前修改XMLHttpRequest对象的,若修改失败返回false,则取消此次ajax请求: 3.cache 默认为true,设置为false即不缓存.(当datatype为script或ja