本文實(shí)例講述了jquery+ajax實(shí)現(xiàn)注冊(cè)實(shí)時(shí)驗(yàn)證。分享給大家供大家參考,具體如下:
當(dāng)我們注冊(cè)一個(gè)用戶時(shí),會(huì)實(shí)時(shí)提示該用戶的信息是否可用,這就是ajax的應(yīng)用,很久以前就看過這個(gè)實(shí)現(xiàn)了,今天又看了一遍,給記錄下來O(∩_∩)O哈!
先介紹下ajax中$.get,由于$.post用法和$.get大同小異就不再介紹了:
這是一個(gè)簡單的 GET 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù),請(qǐng)使用 $.ajax。
參數(shù) | 描述 |
---|---|
url | 必需。規(guī)定將請(qǐng)求發(fā)送的哪個(gè) URL。 |
data | 可選。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。 |
success(response,status,xhr) | 可選。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。 額外的參數(shù):
|
dataType | 可選。規(guī)定預(yù)計(jì)的服務(wù)器響應(yīng)的數(shù)據(jù)類型。 默認(rèn)地,jQuery 將智能判斷。 可能的類型:
|
更多示例:
例子 1
請(qǐng)求 test.php 網(wǎng)頁,傳送2個(gè)參數(shù),忽略返回值:
例子 2
顯示 test.php 返回值(HTML 或 XML,取決于返回值):
$.get("test.php", function(data){ alert("Data Loaded: " + data);});
例子 3
顯示 test.cgi 返回值(HTML 或 XML,取決于返回值),添加一組請(qǐng)求參數(shù):
$.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>用戶注冊(cè)</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()方法返回或設(shè)置被選元素的值。 if(len(name)< 4)//調(diào)用下面的自定義len函數(shù) $("#username1").html("<font color=red>注冊(cè)名稱必須大于等于2位</font>"); else $("#username1").html("<font color=red>符合要求</font>");//html() 方法返回或設(shè)置被選元素的內(nèi)容 (inner HTML)。});$("#username").blur(function(){name= $("#username").val();$.get("t1.php", { username:name } ,function(data){//判斷數(shù)據(jù)庫中是否存在此用戶名 重點(diǎn)$.get,$.post t1.php在下面 if(data==1) {$("#username1").html("<font color=green>符合要求</font>");} else {$("#username1").html("<font color=green>已被占用</font>");}});});});function len(s) {//若為漢字之類的字符則占兩個(gè)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);?>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。