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 ...
随机推荐
- tomcat8 web工程启动,登陆页面失败问题解决
编辑该文件context.xml 增加以下内容 <CookieProcessor className="org.apache.tomcat.util.http.LegacyCookie ...
- python中itertools里的product和permutation
平时经常碰到全排列或者在n个数组中每个数组选一个值组成的所有序列等等问题,可以用permutation和product解决,很方便,所以在此mark一下吧 直接上代码 from itertools i ...
- Android Studio 打包时 Signature Version 选择V1还是V2 ?
只勾选V2会导致 7.0 以下的安卓机出现 INSTALL_PARSE_FAILED_NO_CERTIFICATES 的问题 ,推荐全选. 解决方案一v1和v2的签名使用1)只勾选v1签名并不会影响什 ...
- 身份证号码 正则表达式 jquery
现在的身份证为18位(最后一位可以是数字,可以是x,可以是X),老的身份证是15位(纯数字). 所以正则是: /(^\d{15}$)|(^\d{17}[\d|x|X]$)/ 扩展: 1 正则表达式的创 ...
- Unity3D初学之2D动画制
作者:Alex Rose Unity最近宣布推出额外的2D游戏支持,添加了Box 2D物理和一个精灵管理器. 但这里还是有些技巧需要牢记在心.逐帧更改图像只是动画制作的冰山一角,若要让你的游戏出色运行 ...
- scala spark 聚类
import org.apache.spark.ml.clustering.KMeansimport org.apache.spark.ml.evaluation.ClusteringEvaluato ...
- ValueError: too many values to unpack tensorflow
使用tensorflow 的时候报错: result ,_= sess.run(ops)ValueError: too many values to unpack 其实是ops里面不止一个,返回解压成 ...
- Anaconda安装及配合pycharm使用
首先到https://www.anaconda.com/download/下载合适的anaconda版本.如Windows 64bit. 下载了直接双击开始下载,一路同意下去,到选择安装的目录.这里选 ...
- php挖掘数据编码问题
if(json_encode($jkkey) == 'null'){//判断不是utf8会返回空 $jkkey=mb_convert_encoding($jkkey,'utf-8','gbk'); } ...
- 大型运输行业实战_day13_1_定时任务spring-quartz
1.jar包 拷贝quartz-2.2.3.jar包到项目 2.编写定时任务类TicketQuart.java package com.day02.sation.task; import com.da ...