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 ...
随机推荐
- Centos6配置samba服务器并批量添加用户和文件夹
一.需求 局域网内有若干用户,所有用户访问一个共享目录 每个用户在共享目录里有自己的文件夹 每个用户都可以读取其他人的文件夹 每个用户只能对自己的文件夹有写入权限 所有用户都属于filesgroup组 ...
- Highcharts - Bar Chart & Column Chart
1. 条形图(Bar Chart)需要的数据格式类型如下: ["Luke Skywalker", "Darth Vader", "Yoda" ...
- 从虚拟机角度看Java多态->（重写override）的实现原理
工具与环境:Windows 7 x64企业版Cygwin x64jdk1.8.0_162 openjdk-8u40-src-b25-10_feb_2015Vs2010 professional 0x0 ...
- 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色
简介 在简单恢复模式下,日志文件的作用仅仅是保证了SQL Server事务的ACID属性.并不承担具体的恢复数据的角色.正如”简单”这个词的字面意思一样,数据的备份和恢复仅仅是依赖于手动备份和恢复.在 ...
- CompletionService的poll方法
1.poll():马上返回完成的任务,若没有,则返回null 2.poll(long timeout, TimeUnit unit): 等待timeout时间,如果大于最短任务完成时间,则获取任务结果 ...
- Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行，它们有什么区别? 线程的sleep()方法和yield()方法有什么区别？
Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指定的时间 ...
- Siebel 集成中的“发布-订阅”与“阅读”
将 Siebel 应用程序中存储的数据提供给企业中的其他应用程序时,通常需要遵循以下两种基本模式之一: 发布-订阅 阅读 “发布-订阅”是一种机制,根据该机制,一个系统(发布者)将更改或更新的数据提供 ...
- 通过 Powershell 来替换 ARM 模式下虚拟机的网络接口
需求描述 客户在部署完 ARM 模式的虚拟机以后,由于误操作在虚拟机内部禁用了网卡导致远程访问虚拟机受到限制,以下是通过 Powershell 命令来替换原有虚拟网络接口实现虚拟网卡重置功能. Not ...
- HCNA配置手工负载分担模式链路聚合
一.配置手工负载分担模式链路聚合 链路聚合(Link Aggregation)是将—组物理接口捆绑在一起作为一个逻辑接口来增加带宽的一种方法,又称为多接口负载均衡组(Load Sharing Grou ...
- 数据结构与算法分析java——线性表3 (LinkedList)
1. LinkedList简介 LinkedList 是一个继承于AbstractSequentialList的双向链表.它也可以被当作堆栈.队列或双端队列进行操作.LinkedList 实现 Lis ...