zoukankan      html  css  js  c++  java
  • 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; }
        }
  • 相关阅读:
    Java内存分配及垃圾回收机制
    《当你的才华还撑不起你的梦想时》读后感
    Java线程池入门必备
    单例模式的那些事
    idea超炫的自定义模板
    布隆过滤器概念和原理
    MessageDigest
    java zip 压缩与解压
    WebStorm 注册码
    taobao-pamirs-proxycache开源缓存代理框架实现原理剖析
  • 原文地址:https://www.cnblogs.com/pauline/p/6696704.html
Copyright © 2011-2022 走看看