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 ...
随机推荐
- javascript实现数据结构：稀疏矩阵的十字链表存储表示
当矩阵的非零个数和位置在操作过程中变化大时,就不宜采用顺序存储结构来表示三元组的线性表.例如,在作“将矩阵B加到矩阵A上”的操作时,由于非零元的插入或删除将会引起A.data中元素的移动.为此,对这种 ...
- 【阿里云产品公测】简单粗暴30S完成PTS测试配置附tornado服务器测试结果
作者:阿里云用户morenocjm [阿里云产品公测]简单粗暴 30S完成PTS测试配置(附tornado服务器测试结果) -------------------------------------- ...
- java web的安全约束--表单的验证
例子,表单和JDBCRealm的安全验证 参考了一篇文章http://www.cnblogs.com/dyllove98/archive/2013/07/31/3228698.html 1.要在wab ...
- 【java开发系列】—— java输入输出流
前言 任何语言输入输出流都是很重要的部分,比如从一个文件读入内容,进行分析,或者输出到另一个文件等等,都需要文件流的操作.这里简单介绍下reader,wirter,inputstream,output ...
- java之大文件断点续传
针对某些场景下,面对服务文件大,或者服务端服务器不稳定时使用该模块.功能代码如下: import java.io.File; import java.io.FileOutputStream; impo ...
- 数组：获取数组中最后一个数据end()函数
今天来学习一下end()函数 1.案例:直接获取数组中最后一个数据 代码部分 结果: 2.案例:从url中获取最后一个数据 代码部分: 结果: 总结: 1.有时候我们需要去获取数据库中,id最大的那个 ...
- Pandas使用详细教程(个人自我总结版)
Pandas 是我最喜爱的库之一.通过带有标签的列和索引,Pandas 使我们可以以一种所有人都能理解的方式来处理数据.它可以让我们毫不费力地从诸如 csv 类型的文件中导入数据.我们可以用它快速地对 ...
- html css：背景图片链接css写法
图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...
- linux自动备份文件 并上传到远程服务器 脚本实现
(1)在服务器上创建备份目录,并赋予权限 mkdir -p /backup/bakdata #新建数据备份目录(2)完成备份脚本操作新建脚本文件 vi bakdata.sh添加 ...
- 【HHHOJ】ZJOI2019模拟赛（十六）4.07 解题报告
点此进入比赛 得分: \(100+100+100=300\) 排名: \(Rank\ 1\) \(Rating\): \(+13\)(\(\frac18Rated\)) 备注: 这场比赛全是做过的原题 ...