MVC中Ajax post 和Ajax Get——提交对象
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
在MVC中用ajax的方式传送数据
先创建实体
using System.ComponentModel;
namespace ViewerWeb.Models
{
public class UserInfo
{
[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";
}
<p>@ViewBag.Message.</p>
<div>
@using (Html.BeginForm("Create", "Home", FormMethod.Post,
new { id = "form1", @class = "form-horizontal" }))
{
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Description, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">OK</button>
</div>
</div>
}
</div>
后台Controller
[HttpPost]
public ActionResult Create(UserInfo userInfo)
{
return View("PostPage", userInfo);
}
Ajax Post提交和Ajax Get
@section scripts这个是模板页设置的写js的。
@model ViewerWeb.Models.UserInfo
@{
ViewBag.Title = "AjaxPostPage";
}
<h2>@ViewBag.Message.</h2>
<div>
<div class="form-horizontal" id="form1" data-post-url="@Url.Action("CreateUserByPost")"
data-get-url="@Url.Action("CreateUserByGet")">
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Description, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="postButton">Post</button>
<button type="button" class="btn btn-primary" id="getButton">Get</button>
</div>
</div>
</div>
</div>
@section scripts{
<script>
$(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);
}
});
});
});
</script>
}
后台Controller
[HttpPost]
public JsonResult CreateUserByPost(UserInfo userInfo)
{
return Json(new { success = true, message = userInfo.UserName });
} [HttpGet]
public JsonResult CreateUserByGet(UserInfo userInfo)
{
return Json(new { success = true, message = userInfo.UserName }, JsonRequestBehavior.AllowGet);
}
Ajax Post传输列表
@model ViewerWeb.Models.UserInfo
@{
ViewBag.Title = "AjaxPostListPage";
} <h2>@ViewBag.Message.</h2>
<div>
<div class="form-horizontal" id="form1" data-post-url="@Url.Action("CreateUserList")">
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Description, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="postButton">Post</button>
</div>
</div>
</div>
</div>
@section scripts{
<script>
$(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());
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);
}
});
});
});
</script>
}
后台
[HttpPost]
public ActionResult CreateUserList(IEnumerable<UserInfo> userInfos)
{
return Json(new { success = true, message = userInfos.FirstOrDefault().UserName });
}
MVC和Api返回时间的问题Date
MVC和API返回的时间DateTime会变成{"success":true,"d":"\/Date(1563420643851)\/"}的解决办法,前端对时间做处理,把时间处理成想要的格式
var date_reg = /\-?\d+/;
function convertData(date) {
var date_num = parseInt(date.match(date_reg));
var d = new Date(date_num);
if (date_num > 0) {
d.setHours(d.getHours() + 8);
}
return d.toJSON().slice(0, 16);
}
MVC中Ajax post 和Ajax Get——提交对象的更多相关文章
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- 在MVC中如何愉快使用Ajax
前言: 这个故事要从我老大与客户谈需求开始说起.前几天,遇见一个逗比客户,不知道是听了哪个逗比程序员的临终遗言...让我们给他做一个手机端的Web应用出来,还说要使用MVC来做(不是App).马币,客 ...
- MVC中的奇葩错误,参数转对象
在使用MVC中遇到一个神奇的错误,特此记录(我在用MVC4时遇到) 上面两张图就是一个变量名进行了修改,其他不变!form里面的参数也是一样的!喜欢尝试的可以尝试一下! 我的变量使用action时出现 ...
- mvc中使用knockoutjs和ajax
虽然说knockoutjs 官网上写的非常的清楚!但是像我这样的英语呕吐患者,真是虐心啊!今天我写下做个记录,也为那些初次使用的同学给予帮助, 首先我说一下今天我说的内容只是应用不做原理探究,如果没有 ...
- Asp.net MVC中文件上传的参数转对象的方法
参照博友的.NET WebApi上传文件接口(带其他参数)实现文件上传并带参数,当需要多个参数时,不想每次都通过HttpContext.Request.Params去取值,就针对HttpRequest ...
- ASP.NET MVC中实现多个button提交的几种方法
有时候会遇到这样的情况:在一个表单上须要多个button来完毕不同的功能,比方一个简单的审批功能. 假设是用webform那不须要讨论,但asp.net mvc中一个表单仅仅能提交到一个Action处 ...
- Asp.net Mvc 中的模型绑定
asp.net mvc中的模型绑定可以在提交http请求的时候,进行数据的映射. 1.没有模型绑定的时候 public ActionResult Example0() { ) { string id ...
- MVC中处理表单提交的方式(Ajax+Jquery)
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
- Asp.net MVC 中Ajax的使用 [分享]
文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...
- 在MVC中要实现Ajax
在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Proto ...
随机推荐
- angular指令的compile,prelink 和 postlink以及controller
一. 指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在, ...
- mysql decimal
可能做程序的人都知道,float类型是可以存浮点数(即小数类型),但是float有个坏处,当你给定的数据是整数的时候,那么它就以整数给你处理. 这样我们在存取货币值的时候自然遇到问题,我的defaul ...
- Android签名
参考文档:http://blog.csdn.net/u010316858/article/details/53159678 http://www.cnblogs.com/wanqieddy/p/355 ...
- ArcGIS模型构建器案例教程-批量复制工作空间所有要素类
ArcGIS模型构建器案例教程-批量复制工作空间所有要素类 目的:批量复制工作空间所有要素类 工具名称:WorkspaceCopyFeatureClasses 使用方法:输入工作空间,指定输出工作空间 ...
- Uni2D 入门 -- Animation Clip 和 Animation API
转载 csdn kakashi8841 http://blog.csdn.net/kakashi8841/article/details/17599505 Animation Clip 一个anima ...
- Java学习05 (第一遍) - JSP与Servlet
JSP 客户端发出Request请求,JSP容器将JSP转译为Servlet的源码,再编译加载到内存执行,结果Response到客户端. Request->JSP->Servlet(jav ...
- Generative Adversarial Networks,gan论文的畅想
前天看完Generative Adversarial Networks的论文,不知道有什么用处,总想着机器生成的数据会有机器的局限性,所以百度看了一些别人 的看法和观点,可能我是机器学习小白吧,看完之 ...
- hdu1576-A/B-(同余定理+乘法逆元+费马小定理+快速幂)
A/B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- property 、classmethod 、 staticmethod 的用法
@property # property是一个装饰器函数 ,作用:将一个方法伪装成属性 # 所有的装饰器函数都怎么用? 在函数.方法.类的上面一行直接@装饰器的名字 # 装饰器的分类: # 装饰函数 ...
- 税控服务器 TC5002UpdatePackage 安装更新
Linux版税控服务器单税号版本税控应用: TC5002UpdatePackage2008160711.zip 单税号服务器(型号:TCG-01S1) Linux版税控服务器20个 ...