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 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
简单理解vue中Props属性
Oct 27 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php实现源代码加密的方法
2015/07/11 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
理解JavaScript中的事件
2006/09/23 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
JS正则表达式常见用法实例详解
2018/06/19 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python Socket之客户端和服务端握手详解
2017/09/18 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
建筑毕业生自我鉴定
2013/10/18 职场文书
关于毕业的广播稿
2014/01/10 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
企业年会祝酒词
2015/08/11 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python