jquery+ajax实现注册实时验证实例详解


Posted in Javascript onDecember 08, 2015

本文实例讲述了jquery+ajax实现注册实时验证。分享给大家供大家参考,具体如下:

当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈!

先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了:

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

$(selector).get(url,data,success(response,status,xhr),dataType)

参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(response,status,xhr) 可选。规定当请求成功时运行的函数。 额外的参数: response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预计的服务器响应的数据类型。 默认地,jQuery 将智能判断。 可能的类型: "xml" "html" "text" "script" "json" "jsonp"
请求 test.php 网页,忽略返回值:
$.get("test.php");

更多示例:

例子 1

请求 test.php 网页,传送2个参数,忽略返回值:

$.get("test.php", { name: "John", time: "2pm" } );

例子 2

显示 test.php 返回值(HTML 或 XML,取决于返回值):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

例子 3

显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
  alert("Data Loaded: " + data);
});

下面贴上我的代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript" src="jquery/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#username").keyup(function()
{
  name= $("#username").val();//val()方法返回或设置被选元素的值。
  if(len(name)< 4)//调用下面的自定义len函数
  $("#username1").html("<font color=red>注册名称必须大于等于2位</font>");
  else
  $("#username1").html("<font color=red>符合要求</font>");//html() 方法返回或设置被选元素的内容 (inner HTML)。
});
$("#username").blur(function(){
name= $("#username").val();
$.get("t1.php", { username:name } ,function(data){//判断数据库中是否存在此用户名 重点$.get,$.post t1.php在下面
  if(data==1) {$("#username1").html("<font color=green>符合要求</font>");}
  else {$("#username1").html("<font color=green>已被占用</font>");}
});
});
});
function len(s) {//若为汉字之类的字符则占两个
var l = 0;
var a = s.split("");
for (var i=0;i<a.length;i++) {
 if (a[i].charCodeAt(0)<299) {
 l++;
 } else {
 l+=2;
 }
}
return l;
}
</script>
</head>
<body>
<form name="fram" action="register.php" onsubmit="return docheck();">
<table width="330" border="0" align="center" cellpadding="5" bgcolor="#eeeeee">
<tr>
  <td>用户名:</td>
  <td><input name="username" type="text" id="username" /></td><td><div id="username1"></div></td>
</tr>
</table>
</form>
</body>
</html>

t1.php:

<?php 
$link=mysql_connect("localhost","root","");
mysql_select_db("test");
mysql_query("set names utf8");//
$sql="select * from user where user='".$_GET['username']."'";//
  $result=mysql_query($sql) or die(mysql_error());
$num=mysql_affected_rows();
if($num==0)
$msg=1;
else
  $msg=0;
echo $msg;//返回值
mysql_close($link);
?>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
通过JS深度判断两个对象字段相同
Jun 14 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 #Javascript
基于JavaScript创建动态Dom
Dec 08 #Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 #Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 #Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 #Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 #Javascript
JS获取文件大小方法小结
Dec 08 #Javascript
You might like
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
jQuery实现简单日历效果
2020/07/05 jQuery
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
九年级体育教学反思
2014/01/23 职场文书
党员大会主持词
2014/04/02 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
人事专员岗位说明书
2014/07/29 职场文书
少先队活动总结
2014/08/29 职场文书
投资合作意向书范本
2015/05/08 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记