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 相关文章推荐
cookie中的path与domain属性详解
Dec 18 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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实现模拟http请求的方法分析
2017/12/20 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python实现ip代理池功能示例
2019/07/05 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
DJI全球:DJI Global
2021/03/15 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书