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="https://www.jb51.net/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 action="register.php" onsubmit="return docheck();"> <table cellpadding="5" bgcolor="#eeeeee"> <tr> <td>用户名:</td> <td><input type="text" /></td><td><div></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); ?>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzwpp.html