MVC之AJAX异步提交表单
第一种用法:
在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为
前台
<html>
<head><meta name="viewport" content="width=device-width" /><title>Index</title><script src="~/Scripts/jquery-1.8.2.min.js"></script><script type="text/javascript">$(function () {$("#btn").click(function () {$.post("/Home/ShowUserName", {}, function (data) {var data = $.parseJSON(data);for (var i = 0; i < data.length; i++) {$("#div").append(data[i]);}})})});</script>
</head>
<body><div><input type="button" id="btn" value="加载"/><div id="div"></div></div>
</body>
</html>后台public ActionResult ShowUserName(){IQueryable<string> teacherNameList= dbContext.Teacher.Select(u => u.TeacherName);JavaScriptSerializer js = new JavaScriptSerializer();string nameList= js.Serialize(teacherNameList);return Content(nameList);}
其实对于MVC中已经对json做了更好的封装,就后台代码而言,可以返回JsonResult,所以可以省掉自己手写JavaScriptSerializer类
第二种用法:
MVC中已经对ajax校验进行了很好的封装,可以使用相关的类库直接点出来。
Ajax.BeginForm(...)
首先因为即使微软的MVC进行封装了,它依然依赖于ajax,所以需要添加相应的j文件
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<html>
<head><meta name="viewport" content="width=device-width" /><title>Index</title><script src="~/Scripts/jquery-1.8.2.min.js"></script><script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script><script type="text/javascript">function Hello(data){alert("hello"+data);}</script></head>
<body><div>@using (Ajax.BeginForm("Index1", "ajax", new AjaxOptions() { Confirm = "确定要删除吗", HttpMethod = "post", OnSuccess = "Hello" })){<input type="submit" value="提交" />} </div>
</body>
</html>
上面的代码实现了异步提交的操作,当然Ajax.BeginForm有很多的重载,可以实现基本所有的手写的功能,同时发现其中的提交按钮的类型是submit类型,但是依然是走的异步调用的流程,具体的原因是,隐式JS文件中,首先会找到这个打了标记的Form表单,然后将表单中的数据进行异步传输,而不会受到后面这个提交按钮的影响。
转载于:https://www.cnblogs.com/XZhao/p/6665500.html
MVC之AJAX异步提交表单相关推荐
- 微信ajax异步提交form表单,ajax异步提交表单
前面我们一直谈 wojilu ajax framework ,已经表明了它是一个 ajax 框架.但其实客户端验证等内容几乎不涉及到 ajax 操作. 下面我们就着重看下这个框架ajax操作方面. 其 ...
- springboot: ajax异步提交表单
<form id="p">权限名称: <input name="name" type="text" th:value=&q ...
- tp5 ajax 路由,tp5中ajax方式提交表单
用ajax提交表单,迅速,快捷,实现页面无刷新提交表单. ajax批删 姓名 年龄 地址 添加 $("#sub").click(function(){ var name = $(& ...
- ajax如何实现表单验证码,Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)...
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html 验证码提交自验证 用户名 验证码 (function($){ $(docu ...
- ajax异步提交 java_jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- 如何异步提交表单 如何异步跨域提交表单
1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 代码: 使用 jQuery 异步提交表单 <html xmlns="http ...
- jquery 上传图片 java_jquery 异步提交表单 上传图片小例子
这次做ecshop项目用到了一些小东西,这里我就把在项目中用到的一个异步上传多个产品图片的小东西,不是多好,但是是我自己查资料搞出来的.放这里,给自己和大家一个参考,欢迎丢砖!(jquery+spri ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
- 解决使用Ajax 前台提交表单到后台,但输出为问号的中文乱码情况
解决使用Ajax 前台提交表单到后台,但输出为问号的中文乱码情况 情况如下: 在web.xml文件中已经配置了,如下的spring的Filter <filter><filter-na ...
最新文章
- CSS FC布局指南
- 二层交换机可以划分vlan吗_二层交换机上,属于不同VLAN的PC该如何通信
- Python 中浅拷贝的四种实现方法
- 【深度学习】擦除:提升 CNN 特征可视化的 3 种重要手段
- 仿无名云易支付首页模板
- 超图三维可以转换成HTML,iserver上发布的三维场景怎样调用到自己的html页面中?...
- asp.net2.0自定义控件---鼠标移到按钮上更改背景颜色,移出后恢复
- 重构Webpack系列之一 ---- 概念篇
- 手游运营数据监控指标浅谈
- 注塑模具的温度对注塑工艺的影响到底有多大呢
- python判断火车票座位号分布图_如何选择火车靠窗座位和选座位技巧!
- 【暂时性死区(TDZ)】
- 引起计算机故障的因素有哪些,电源故障引起的电脑问题有哪些
- 华硕ezflash3找不到u盘_华硕ez flash 3
- 微信中最让你恶心的一项功能是什么
- 【拆书】《深度工作》教你时间管理
- 光标怎么设置sap_设置placeholder光标
- 专访北京航空航天大学黎健成:我和编程比赛
- App性能优化(一)—— 启动优化,冷启动,热启动,温启动
- 孙武玩《魔兽》?有图有真相
热门文章
- 【Tools】TeamViewer安装教程
- 【Tools】TortoiseGit安装图解
- mac你没有权限打开应用程序_苹果mac卡顿怎么解决呢?轻松几招让你Mac流畅如新
- python中match方法返回字符串的长度_Python re模块与正则表达式详解
- swing打地鼠游戏_【亲子早教】9月早教亲子游戏
- MySQL了content函数_MySql字符串函数使用技巧
- bat产品经理能力模型_产品经理如何构建自己的产品能力模型?
- Java堆排序递归_大顶堆第二弹----堆排序(递归实现)
- python包接口,Typetalk聊天API的python接口包
- CentOS修改MySql数据库目录datadir