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 ...
随机推荐
- 今天学习到的几条shell技巧
1.获取某个进程的进程号 PID=`ps aux | grep 进程名 | grep -v "grep" | awk '{print $2}'` 2.获取某个进程的CPU(同理可获 ...
- JAVA字符串格式化-String.format()的使用【转】
原文地址:https://blog.csdn.net/lonely_fireworks/article/details/7962171 常规类型的格式化 String类的format()方法用于创建格 ...
- FMS Dev Guide学习笔记(远程共享对象)
一.开发交互式的媒体应用程序1.共享对象(Shared objects) ----远程共享对象 在你创建一个远程共享对象之前,创建一个NetConnection对象并且连接到服务器.一旦你创建了 ...
- 三种文本特征提取(TF-IDF/Word2Vec/CountVectorizer)及Spark MLlib调用实例(Scala/Java/python)
https://blog.csdn.net/liulingyuan6/article/details/53390949
- centos7.5下yum 安装mariadb数据库
前言 mariadb 和mysql就像亲兄弟的关系,各种语法.驱动啥的,在mysql上能上的,在mariadb上基本都可以直接使用.更多的细节在此不多说. 1.删除旧版本 centos7下默认安装有m ...
- Gradle 在Eclipse中的使用
eclipse上gradle插件的安装 1)在Eclipse中选择Help -> Eclipse Marketplace…,输入buildship点击Go,然后选择Install安装Gradle ...
- clearfix原理
[clearfix原理] .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容: content: "."; <----内容 ...
- Android无法访问本地服务器(localhost/127.0.0.1)的解决方案
[Android无法访问本地服务器(localhost/127.0.0.1)的解决方案] 在Android开发中通过localhost或127.0.0.1访问本地服务器时,会报Java.NET.Con ...
- python学习day3 编程语言分类 变量 格式化输出
1.编程语言分类 机器语言:直接使用二进制指令直接编写程序,直接操作计算机硬件,必须考虑硬件细节 汇编语言:使用英文标签代替二进制指令去编写程序,直接操作计算机硬件,必须考虑硬件细节对,不过相比机器语 ...
- 全国高校绿色计算大赛 预赛第一阶段(C++)第2关:扔桃子
挑战任务 动物园有一只小猴子喜欢吃桃子,不过它有个很独特的习惯,每次都把找到的桃子分成相等的两份,吃掉一份,留一份.如果不能等分,小猴子就会丢掉一个然后再分.第二天再继续这个过程,直到最后剩一个桃子了 ...