首先提出一个问题：在做网站开发的时候，用到了验证码来防止恶意提交表单，那么要如何实现当验证码错误时，只是刷新一下验证码，而其它填写的信息不改变？

　　先说一下为什么有这个需求：以提交注册信息页面为例，一般注册都需要用户填一个验证码信息（防止机器恶意注册），并且这个验证码会提交到后台去进行比对，若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误。若是简单地用form表单直接将数据提交到指定的url，当验证码填写错误的信息返回浏览器端的时候，不可避免整个页面都会重新刷新一次，这是用户所不想要的，因为其它的一些正确信息还需要重新再填一次，这样就造成用户体验不太好。而这个问题就可以通过Ajax异步提交表单来实现。（这只是其中一种解决方案）

　　下面就来看看具体的实现：

　　前台Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>Ajax异步提交表单之检查验证码</title>

    </head>

    <body>

    <form action="javascript:AjaxPostData()" method="post">

        <label>用户名：</label>

        <input name="account" class="form-control" id="account" type="text" placeholder="用户名" required="required" />

        <label>密码：</label>

        <input name="password" class="form-control" id="password" type="password" placeholder="密码" required="required" />

        <label>验证码：</label>

        <img id="valiCode" class="validcode" src="/Home/GetValidateCode" alt="验证码" title="点击刷新" />

        <input name="code" class="form-control" id="code" type="text" placeholder="验证码" required="required" />

        <button type="submit">提交</button>

    </form>

    <script src="~/Scripts/jquery-1.12.1.min.js"></script>

    <script>

        //刷新验证码

        function RefreshValiCode() {

            document.getElementById("valiCode").src = "/GetValidateCode?time=" + (new Date()).getTime();

        }

        function AjaxPostData()

        {

            var code = document.getElementById("code").value;

            var account = document.getElementById("account").value;

            var password = document.getElementById("password").value;

            $.ajax({

            url: '/User/Register',//数据提交到的目标url

            type: 'post',//post方式提交

            async: true,//异步提交

            data: {account: account, password: password, code: code },//提交的数据

            success: function (data) {//发送成功的回调函数

                if (data.success) {

                    alert("注册失败!");

                }

                else {

                    alert("注册成功!");

                    RefreshValiCode();//刷新验证码

                    document.getElementById("code").value = "";//置空输入框

                }

            },

            error: function () {

                alert("请求失败!请重新提交!");

                }

            });

        }

    </script>

    </body>

</html>

　　注：jquery-1.12.1.min.js需要自己下载引用。

　　后台C#代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Security;

namespace Test.Controllers

{

    public class UserController : Controller

    {

         /// <summary>

        /// 注册

        /// </summary>

        /// <param name="code">验证码</param>

        /// <returns></returns>

        [HttpPost]

        public ActionResult Register(string name, string password, string code)

        {

            //Session["RegisterCode"]在生成验证码的时候设置其值

            if (string.IsNullOrWhiteSpace(code) || Session["RegisterCode"].ToString().ToUpper() != code.ToUpper())

            {

                return Json(new { success = false});

            }

            else

            {

                //其它操作...

                return Json(new { success = true});

            }

        }

    }

}

　　此次知识分享就到这，敬请期待下一次的分享。^_^

<我的博客主页>:http://www.cnblogs.com/forcheng/

<Wing工作室主页>:http://www.wingstudio.org/

ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码的更多相关文章

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

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

  2. 使用ajax异步提交表单

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

  3. MVC之AJAX异步提交表单

    第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...

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

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

  5. ASP.NET MVC 网站开发总结（三） ——图片截图上传

    本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...

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

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

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

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

  8. Asp.net Mvc Ajax.BeginForm提交表单

    之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...

  9. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据

    摘要      本文将完成我们“MVC公告发布系统”的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言      通过前几篇文章,我们已经能比较自如的使用ASP.NET ...

随机推荐

  1. mac下apache配置，解决It is not safe to rely on the system's timezone settings.

    之前一直转windows平台下做php,很少遇到问题.现在有了macbook,还在慢慢的熟悉中,搭建php开发环境,熟悉mac系统文档组织还有命令,颇费功夫. 今天我在mac下做一个php的练习,用到 ...

  2. 一个线上运营着3000+人的游戏，因为我不小心一个DROP DATABASE，全没了。 怎么办？？跟我HOLD住！！！

    前言 今天下午3点,我按照惯例,打开游戏服务器,开新服部署嘛,游戏在腾讯开放平台,简单.闭着眼睛都OK.于是一轮子的复制黏贴拷贝,把服务器加起来,然后启动查看日志. ....突然发现不断的有Excep ...

  3. 微软专家推荐11个Chrome 插件

    Web开发人员,需要长时间使用浏览器,尽管Windows10 Edge浏览器启动非常快速,且支持110多种设备,Edge支持基于JS 扩展,但也删除了很多旧功能像Active-X等插件.多数情况下,插 ...

  4. java arraylist的问题

    不得不说,我犯了错,很基础的.. 遍历list的时候可以删除数组元素吗? 答案是:简单/增强for循环不可以,list.iterator()这样的方式就可以. 我之前做过类似面试题的,不过忘记了, 不 ...

  5. MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在

    返回目录 在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有 ...

  6. MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象

    返回目录 一些要说的 这是一个很有意思的题目,在KO里,有对象和数组对象两种,但这两种对象对外表现都是一个function,如果希望得到他的值,需要进行函数式调用,如ko_a(),它的结果为一个具体值 ...

  7. Atitit 发帖机实现(2)---usrQBN2243 文本解析到对象协议规范

    Atitit 发帖机实现(2)---usrQBN2243 文本解析到对象协议规范 文本内容 ###注释 标题:标题标题标题标题标题1 人数:5 月薪:2000-3000 内容: 内容内容内 容内容内容 ...

  8. Ajax在IE浏览器会出现中文乱码解决办法

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...

  9. Unity3D 中的三个Update()方法

            MonoBehaviour.Update 更新 当MonoBehaviour启用时,其Update在每一帧被调用. MonoBehaviour.FixedUpdate 固定更新 当Mo ...

  10. web接口测试之GET与POST请求

    关于HTTP协议,我考虑了一下觉得没必要再花一节内容来介绍,因为网上关于HTTP协议的介绍非常详细.本着以尽量避免介绍一空洞了概念与理论来介绍接口测试,我这里仍然会给出具体实例. 在此之前先简单的介绍 ...