第一种用法：

在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表单，然后将表单中的数据进行异步传输，而不会受到后面这个提交按钮的影响。

MVC之AJAX异步提交表单的更多相关文章

  1. ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  2. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  3. 使用ajax异步提交表单

    虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...

  4. 使用AJAX异步提交表单的几种方式

    方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...

  5. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  6. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  7. Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  8. SpringMVC中的异步提交表单

    1.前言 近期在做一个项目,前台框架用的是EasyUI+SpringMVC,因为对SpringMVC不太了解,所以刚開始接触的时候有点吃力,在此通过一个EasyUi中的DataGrid表格来总结一下. ...

  9. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...

随机推荐

  1. Spring 4 官方文档学习（十）数据访问之DAO支持

    1.介绍 Spring 中 Data Access Object (DAO)支持 的目标是以一种一致的方式更简单的使用JDBC.Hibernate.JPA或JDO等数据访问技术.可以在前面说的几种数据 ...

  2. R语言低级绘图函数-abline

    abline 函数的作用是在一张图表上添加直线, 可以是一条斜线,通过x或y轴的交点和斜率来确定位置:也可以是一条水平或者垂直的线,只需要指定与x轴或y轴交点的位置就可以了 常见用法: 1)添加直线 ...

  3. 如何用MathType编辑集合运算符号

    在涉及到集合的运算中,有交并且几种常见的运算,这在数学问题中也是很常见的公式.在用MathType编辑这些符号时,该怎么编辑呢?下面就介绍MathType集合运算符号的编辑方法. 具体操作过程如下: ...

  4. ubuntu zip解压

    您好,zip xx.zip压缩,unzip xx.zip 解压,tar zcvf xx.tar.gz压缩tar zxvf xx.tar.gz解压

  5. PVS 7.6 部署教程

    PVS 7.6 部署教程 1 PVS介绍 Citrix Provisioning Services採用流技术通过网络将单一标准桌面镜像,包含操作系统和软件按需交付给物理虚拟桌面.一方面实现同型号机器单 ...

  6. 超全面的JavaWeb笔记day20<监听器&国际化>

    JavaWeb监听器 三大组件: l Servlet l Listener l Filter Listener:监听器 1. 初次相见:AWT 2. 二次相见:SAX 监听器: l 它是一个接口,内容 ...

  7. Java精选笔记_EL表达式

    EL表达式 初始EL EL是一种可以简化JSP页面的表达式,EL表达式的语法非常简单都是以"${"符号开始,以"}"符号结束的 EL表达式是一种简单的数据&qu ...

  8. ios开发之--UIDocumentInteractionController的使用（实现更多分享服务）

    最近在做项目的时候,碰到这样一个需求,就是本地生成pdf文件,然后本地打开,经过测试发现,pdf文件是无法保存到相册里面的,只能存到手机里面,鉴于苹果的存储机制,需要取出来,进行本地展示,可以直接传到 ...

  9. laravel 模版赋值

    1)一般赋值是直接用view助手函数返回的 return view('Index/index', ['key'=>'value']); 2)一般做系统时,我们都会有一个共同控制器,其他控制器继承 ...

  10. php 网络爬虫，爬一下花瓣的图片

    今天无聊看在知乎上看到有人写网络爬虫爬图片(￣▽ ￣) 传送门: 福利 - 不过百行代码的爬虫爬取美女图:https://zhuanlan.zhihu.com/p/24730075 福利 - 不过十行 ...