ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码
首先提出一个问题：在做网站开发的时候，用到了验证码来防止恶意提交表单，那么要如何实现当验证码错误时，只是刷新一下验证码，而其它填写的信息不改变？
先说一下为什么有这个需求：以提交注册信息页面为例，一般注册都需要用户填一个验证码信息（防止机器恶意注册），并且这个验证码会提交到后台去进行比对，若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误。若是简单地用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异步提交表单之检查验证码的更多相关文章
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- 使用ajax异步提交表单
虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...
- MVC之AJAX异步提交表单
第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...
- 使用AJAX异步提交表单的几种方式
方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...
- ASP.NET MVC 网站开发总结（三） ——图片截图上传
本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...
- Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- Asp.net Mvc Ajax.BeginForm提交表单
之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据
摘要 本文将完成我们“MVC公告发布系统”的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET ...
随机推荐
- Senparc.Weixin.MP SDK 微信公众平台开发教程（三）：微信公众平台开发验证
要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...
- git 修改管理
查看修改: 撤销某一文件的修改(还没提交): 撤销所有文件的修改: git checkout .
- IBatisNet：让insert操作返回新增记录的主键值
项目引用ibatis包: IBatisNet.Common.dll --文件版本1.6.2.0 IBatisNet.DataAccess.dll IBatisNet.DataMapper.dll 项目 ...
- 我心中的核心组件（可插拔的AOP）~第二回 缓存拦截器
回到目录 AOP面向切面的编程,也称面向方面的编程,我更青睐于前面的叫法,将一个大系统切成多个独立的部分,而这个独立的部分又可以方便的插拔在其它领域的系统之中,这种编程的方式我们叫它面向切面,而这些独 ...
- 爱上MVC~MVC4模型验证可以放在前端
回到目录 MVC4.0推出后,在模型验证上有了一个新的改近,它支持前端验证,即在用户POST之前,如果验证失败,则Action(POST方式的)不会被执行,而直接停留在原视图,这对于用户体验是好的,它 ...
- EF架构~对AutoMapper实体映射的扩展
回到目录 AutoMapper在之前我曾经介绍过,今天主要是把它作一下扩展,因为它的调用太麻烦了,呵呵,扩展之后,用着还可以,感觉.net3.5之后,有了扩展方法这个东西,在程序开发速度及表现力上都有 ...
- CKFinder_AspDotNet_2.4 破解方法 去版权
CKFinder是一个比较好用的Web端文件管理器,虽然UI不是很好看,但是因为能搞到源码,所以比起网上那些只有付费之后才能下载到源码的Web端文件管理器要好许多,至少你可以在确定该控件是否能用在你的 ...
- AngularJS in Action读书笔记3——走近Services
试着想想这些问题:如果一个controller只关心自己所控制的view页面,那么对于整个application来说,你如何调用想要的function:如果controller从来都不会和其他cont ...
- Hadoop入门学习笔记---part1
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...
- nodejs 生产环境配置
1.node 默认为development(开发)模式 启动node 时可以设置模式为生产模式 set NODE_ENV=production node app.js 2.设置node监听的端口 va ...