jQuery禁用鍵盤后退屏蔽F5刷新及禁用右鍵單擊
654
2024-03-13
ajax的實(shí)時(shí)驗(yàn)證技術(shù)已經(jīng)很成熟了，在一些規(guī)范的網(wǎng)站上，如果有注冊(cè)驗(yàn)證的模板，必定會(huì)涉及到ajax的無刷新驗(yàn)證，這在用戶注冊(cè)的體驗(yàn)中是很棒的，對(duì)比一個(gè)不能及時(shí)和后臺(tái)無刷新對(duì)接的驗(yàn)證模式，要重新返回來刷新，這對(duì)于用戶來說，體驗(yàn)上是很不友好的。
ajax的模式幾乎是所有站點(diǎn)應(yīng)用的需求，ajax作為前端無刷新驗(yàn)證，可以和所有后臺(tái)語言進(jìn)行組合使用，比如asp+ajax,php+ajax,.net+ajax等等組合，這里主要講解的是php+ajax的注冊(cè)驗(yàn)證。
下面的驗(yàn)證是一個(gè)完整的實(shí)例，我們?cè)诰W(wǎng)站上面注冊(cè)時(shí)，在輸入用戶名時(shí)，首先要進(jìn)行無刷新驗(yàn)證，要驗(yàn)證一下后臺(tái)數(shù)據(jù)庫里面是否存在同名的數(shù)據(jù)，如果存在，則無刷新顯示用戶名已被占用的提示，這里一共涉及到四個(gè)文件。
ajax.js:ajax技術(shù)的核心文件了，主要是驗(yàn)證提示的時(shí)時(shí)顯示，這個(gè)文件通常不需要進(jìn)行修改，只需要進(jìn)行前端調(diào)用即可。
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
xmlHttp.onreadystatechange=stateChanged
var geturl="conn.php?q="+str
//sid是增加一個(gè)隨機(jī)數(shù) 防止頁面啟用緩存技術(shù)·
geturl=geturl+"&sid="+Math.random()
geturl=encodeURI(geturl);
geturl=encodeURI(geturl);
xmlHttp.open("GET",geturl,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
conn.php:這是網(wǎng)站的配置文件，要配置好自己本地的mysql用戶名和密碼,需要配置PHP與數(shù)據(jù)庫的連接,可以參考PHP+MYSQL數(shù)據(jù)庫連接的文章,另外要處理接受過來的數(shù)據(jù)進(jìn)行時(shí)實(shí)顯示，如果有多項(xiàng)要驗(yàn)證的文件，在這里進(jìn)行多項(xiàng)接受和驗(yàn)證即可。
<?php
$q=$_GET["q"];
$q = urldecode($q);
if (strlen($q) > 0)
{
$conn = @mysql_connect("localhost","root","1010") or die ("MySql連接錯(cuò)誤");
mysql_select_db("xin",$conn);
mysql_query("set names 'utf8'");
$sql = "SELECT username FROM message WHERE username = '$q'";
$query = mysql_query($sql);
@$row = mysql_fetch_array($query);
if(!empty($row['username']))
{
$response = "<font color=red>已經(jīng)被注冊(cè)！</font>";
}else
{
$response = "<font color=blue>恭喜！可以注冊(cè)！</font>";
}
echo $response;
}
?>
index.html:這就是前端文件了，這個(gè)文件相對(duì)來說要更簡(jiǎn)單一些，調(diào)用了ajax.js的處理文件,將要提交無刷新驗(yàn)證的文件提交到conn.php和后臺(tái)進(jìn)行連接。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://www.gimoo.net/t/1811/ajax.js"></script> </head> <body bgcolor="#999999"> <center> <form> <table> <tr> <td>用戶名：</td> <td><input type="text" id="txt1" onKeyUp="showHint(this.value)"></td> </tr> <tr align="center"> <td colspan="2"><span id="txtHint"></span></td> </tr> </table> </form> </center> </body> </html>
庫.txt:這個(gè)就是SQL的數(shù)據(jù)庫文件了，將這個(gè)文件導(dǎo)入到mysql數(shù)據(jù)庫中即可。
DROP DATABASE IF EXISTS `xin`; CREATE DATABASE `xin` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `xin`; CREATE TABLE `message` ( `id` int(11) NOT NULL auto_increment, `username` varchar(20) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
將這幾個(gè)文件保存在可以運(yùn)行PHP文件的根目錄即可，測(cè)試網(wǎng)址為 localhost/index.html，下面是打包下載的整套文件，試著修改為自己需求的注冊(cè)模塊，比如加上密碼，姓名之類的。
源碼下載：http://xiazai.gimoo.net/201607/yuanma/php+ajaxzhuce(gimoo.net).rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持綠夏網(wǎng)。
