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 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
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
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jquery uaMatch源代码
2011/02/14 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python实现定时发送qq消息
2019/01/18 Python
python list多级排序知识点总结
2019/10/23 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
爱国卫生月实施方案
2014/02/21 职场文书
车辆工程专业求职信
2014/04/28 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers