Ajax在表单中的应用
ajax在注册用户表单中的使用
1.验证用户名是否被使用
2.获取手机短信验证码
3.点击表单中的图片刷新，可实现刷新图片验证码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax在注册用户表单中的使用</title>
</head>
<body>
<p>1.验证用户名是否被使用</p>
<p>2.获取手机短信验证码</p>
<p>3.点击表单中的图片刷新，可实现刷新图片验证码</p>
<script>
//1.给用户名表单元素后添加事件函数checkname()
function Ajax(type,url,data,success,failed){
//创建Ajax对象
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP")
}
var type =type.topperCase();
//用于清除缓存
var random=Math.random();
if(typeof data=="object"){
var str="";
for(var key in data){
str +=key+'='+data[key] +'&';
}
data=str.replace(/&$/,'');
}
if (type=="GET"){
if(data){
xhr.open('GET',url+'?'+data,true);
}else{
xhr.open('GET',url+'?t='+random,true);
}
xhr.send();
}else if(type=="POSt"){
xhr.open('POST',url,true);
xhr.setRequestHeader ("Content-type","app...");//设置请求头信息
xhr.send(data);
}
//处理返回数据
xhr.onreadystatechange =function(){
if(xhr.readystatechange ==4){
if(xhr.status==200){
success(xhr.responseText );
}else{
if(failed){
failed(xhr.status);
}
}
}
}
}
function loading(){//请求慢时显示加载中函数
tipObj=document.getElementsById("tips");
tipObj.style.display="block";
tipObj.innerHTML ="加载中...";
}
function removeLoading(){//移除加载中函数效果
tipObj=document.getElementsById("tips");
tipObj.innerHTML ="";
tipObj.style.display="none";
}
function checkName(){
var name =document.getElementsById("username").value;
if(isNull(name)){//输入为空时，离开该输入框，则提示
showTips("请输入用户名");
}
loading();//当输入不为空时，防止服务器响应慢时调用loading函数
var sendData={username:name,action:'checkname'};
Ajax('get','check.php',sendData ,function(data) {//发送Ajax请求，此处Ajax为之前写好的名为Ajax的函数，其中有创建xmlHTTP对象到完整请求的过程
removeLoading();//当Ajax请求发送成功时，移除加载中效果
var user = eval('(' + data + ')');
if (user.id) {
showTips("用户名已被占用，请重新输入用户名");
}
},function(data){
showTips("Ajax请求错误");
});
}
//2.给手机号短信验证码表单元素添加函数checkMobile
function checkMobile(s){//查询验证手机号码是否合法
var obj=document.getElementsById("usermobile");
var regu=/^[1][3|4|5|8][0-9]{9}$/gi;
var re=new RegExp(regu);
if(!re.test(obj.value)){//若手机号有误，则点击获取短信验证码的按钮继续隐藏
showTips("手机号有误，请重新输入");
var obj=document.getElementById("mobileben");
obj.style.display="none";
obj.disabled=true;
return false;//反之显示按钮
}
var obj=document.getElementById("mobileben");
obj.style.display="block";
obj.disabled=false;
}
function getMobileCode() {
var obj = document.getElementsById("usermobile");
var regu = /^[1][3|4|5|8][0-9]{9}$/gi;
var re = new RegExp(regu);
if (!re.test(obj.value)) {
showTips("手机号有误，请重新输入");
return false;
}
sendData = {mobile: obj.value, action: "getcode"};
Ajax("get", "check.php", sendData, function (data) {
tipObj = document.getElementById("tips");
tipObj.style.display = "block";
tipObj.innerHTML = "手机验证码是：" + data;
}, function (data) {
showTips("手机验证码获取错误");
});
}
//3.点击刷新图片验证码添加函数changeCode
function changeCode(){
var url=document.getElementById("code").src;
var rand=Math.floor(Math.random()*(1000+1));
url+='?'+rand;//给获取的src属性后加一个生成的随机数生成新的验证码图片
document.getElementById("code").src=url;//把新生成的验证码图片赋值回去url
}
</script>
</body>
</html>
Ajax在表单中的应用的更多相关文章
- 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jquery实现ajax提交表单信息
最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...
- 【ajax 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
- lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
- 表单中<form>的enctype属性
application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...
- VIEW层AJAX提交表单到Controller的实体
在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm()) { %> ...
- 一个ajax实现表单上传文件的神器 formdata
通过传统的form表单提交的方式上传文件: $.ajax({ url : "http://localhost:8080/STS/rest/user", type : "P ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
随机推荐
- Android仿QQ界面
最近这几天,一直跟着朋友们聚会什么的,没怎么做项目,今天总算是有时间开电脑继续做我的项目了.下面我就把我做的效果展示一下. 这是模仿了qq的界面效果.因为代码比较长就不粘贴代码了.需要的小伙伴可以跟我 ...
- Java设计模式—门面模式(带案例分析)
1.门面模式的定义: 门面模式(Facade Pattern)也叫做外观模式,是一种比较常用的封装模式,其定义如下: 要求一个子系统的外部与其内部的通信必须通过一个统一的对象进行.门面模式 ...
- 使用CKRule实现PVC配方计算
1,PVC计算的基本原理 配方员设计好配方,再进行抽象提炼,会出现相对于软件而言可以理解的逻辑,如属性的概念,对厂企生成的PVC产品而言,一般都有产品大类名称,花纹,颜色,长度,宽度,厚度等概念,这对 ...
- php json_encode 中文乱码解决方法
本文列举3个方法,实现json_encode()后的string显示中文问题. 做接口时不需要,但存log时帮了大忙了. 在贴代码前,必须贴上官方param和return,链接:http://php. ...
- Android 应用开发 之通过AsyncTask与ThreadPool（线程池）两种方式异步加载大量数据的分析与对比--转载
在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一 ...
- PHP 运行环境和服务器相关配置
1.在DOS命令窗口输入 mysql -hlocalhost -uroot -p回车 进入mysql数据库, 其中-h表示服务器名,localhost表示本地:-u为数据库用户名,root是mysql ...
- maven学习（一）setting.xml配置文件详解
maven环境搭建: 1.官网下载zip包,解压至任意目录(如:E:\wly\apache-maven-3.2.5) 2.环境变量MAVEN_HOME(E:\wly\apache-maven-3.2. ...
- Android学习——Fragment动态加载
动态加载原理 利用FragmentManager来添加一套Fragment事务,最后通过commit提交该事务来执行对Fragment的相关操作. FragmentManager fragmentma ...
- HttpClient拉取连载小说
上午刚入手的小说,下午心血来潮想从网站上拉取下来做成电子书,呵呵,瞎折腾-说做就做- [抓包] 这一步比什么都重要,如果找不到获取真正资源的那个请求,就什么都不用做了- 先是打算用迅雷把所有页面都下载 ...
- SSH免密钥互信及企业案例
SSH远程免密码: 原理简述:客户端 创建公钥和私钥,公钥是锁,私钥是自己留在客户端的钥匙. 客户端将公钥(锁)发出到服务端,以后自己就能用客户端本地的私钥进行登陆,不用输入密码! 1.客户端,和服 ...