首页 > 代码库 > JQuery.Ajax()的data参数传递方式
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; } }
JQuery.Ajax()的data参数传递方式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。