ajax可以提交对象吗,MVC中Ajax post 和Ajax Get——提交对象

最新推荐文章于 2022-07-25 10:49:55 发布

君小竹

最新推荐文章于 2022-07-25 10:49:55 发布

阅读量306

点赞数

文章标签： ajax可以提交对象吗

本文详细介绍了HTTP请求中的GET和POST方法，阐述了它们在客户端和服务器端的不同应用。GET主要用于获取数据，可能被缓存；POST则用于提交数据，不被缓存。在ASP.NET MVC中，通过BeginForm和Ajax实现了POST和GET的数据传递。同时，文章展示了如何使用Ajax进行列表数据的POST提交，以及处理MVC和API返回的DateTime格式问题。

摘要由CSDN通过智能技术生成

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

在MVC中用ajax的方式传送数据

先创建实体

usingSystem.ComponentModel;namespaceViewerWeb.Models

{public classUserInfo

{

[DisplayName("用户名：")]public string UserName { get; set; }

[DisplayName("年龄：")]public int Age { get; set; }

[DisplayName("密码：")]public string Description { get; set; }

}

用BeginForm直接post提交数据

前台页面

@model ViewerWeb.Models.UserInfo

ViewBag.Title= "About";

}

@ViewBag.Message.

@using (Html.BeginForm("Create", "Home", FormMethod.Post,new { id = "form1", @class = "form-horizontal"}))

{

@Html.LabelFor(model=> model.UserName, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.UserName, new { @class = "form-control"})

@Html.LabelFor(model=> model.Age, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.Age, new { @class = "form-control"})

@Html.LabelFor(model=> model.Description, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.Description, new { @class = "form-control"})

}

后台Controller

[HttpPost]publicActionResult Create(UserInfo userInfo)

{return View("PostPage", userInfo);

}

Ajax Post提交和Ajax Get

@section scripts这个是模板页设置的写js的。

@model ViewerWeb.Models.UserInfo

ViewBag.Title= "AjaxPostPage";

}

@ViewBag.Message.

@Html.LabelFor(model=> model.UserName, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.UserName, new { @class = "form-control"})

@Html.LabelFor(model=> model.Age, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.Age, new { @class = "form-control"})

@Html.LabelFor(model=> model.Description, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.Description, new { @class = "form-control"})

Post

Get

@section scripts{$(document).ready(function () {

$("#postButton").on("click", function () {

$.ajax({

type:'POST',

url: $("#form1").data("post-url"),

data: {

UserName: $("#UserName").val(),

Age: $("#Age").val(),

Description: $("#Description").val()

success: function (data) {

alert(data.message);

}

});

$("#getButton").on("click", function () {

$.ajax({

type:'GET',

url: $("#form1").data("get-url"),

data: {

UserName: $("#UserName").val(),

Age: $("#Age").val(),

Description: $("#Description").val()

success: function (data) {

alert(data.message);

}

});

});}

后台Controller

[HttpPost]publicJsonResult CreateUserByPost(UserInfo userInfo)

{return Json(new { success = true, message =userInfo.UserName });

}

[HttpGet]publicJsonResult CreateUserByGet(UserInfo userInfo)

{return Json(new { success = true, message =userInfo.UserName }, JsonRequestBehavior.AllowGet);

}

Ajax Post传输列表

@model ViewerWeb.Models.UserInfo

ViewBag.Title= "AjaxPostListPage";

}

@ViewBag.Message.

@Html.LabelFor(model=> model.UserName, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.UserName, new { @class = "form-control"})

@Html.LabelFor(model=> model.Age, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.Age, new { @class = "form-control"})

@Html.LabelFor(model=> model.Description, new { @class = "col-sm-2 control-label"})

@Html.TextBoxFor(model=> model.Description, new { @class = "form-control"})

Post

@section scripts{$(document).ready(function () {var getData =function () {return{

UserName: $("#UserName").val(),

Age: $("#Age").val(),

Description: $("#Description").val()

};

$("#postButton").on("click", function () {var param =[];

param.push(getData());

$.ajax({

type:'POST',

contentType:"application/json", //必须有

dataType: "json", //表示返回值类型，不必须

url: $("#form1").data("post-url"),

data: JSON.stringify(param),

success: function (data) {

alert(data.message);

}

});

});}

后台

[HttpPost]public ActionResult CreateUserList(IEnumerableuserInfos)

{return Json(new { success = true, message =userInfos.FirstOrDefault().UserName });

}

MVC和Api返回时间的问题Date

MVC和API返回的时间DateTime会变成{"success":true,"d":"/Date(1563420643851)/"}的解决办法，前端对时间做处理，把时间处理成想要的格式

var date_reg = /-?d+/;functionconvertData(date) {var date_num =parseInt(date.match(date_reg));var d = newDate(date_num);if (date_num > 0) {

d.setHours(d.getHours()+ 8);

}return d.toJSON().slice(0, 16);

}