今天我們來(lái)談一談關(guān)于ajax注冊(cè)實(shí)例 PHP的話(huà)題。隨著網(wǎng)站發(fā)展，社交網(wǎng)站、網(wǎng)上商城等越來(lái)越受歡迎，用戶(hù)注冊(cè)也成了一個(gè)必不可少的環(huán)節(jié)。而ajax技術(shù)的出現(xiàn)，使得注冊(cè)表單的實(shí)時(shí)交互驗(yàn)證變得容易實(shí)現(xiàn)，用戶(hù)體驗(yàn)也得到了很大的提升。下面我們就來(lái)看看如何使用ajax技術(shù)實(shí)現(xiàn)注冊(cè)表單。

首先來(lái)看一下我們的注冊(cè)表單內(nèi)容，一般包括輸入賬號(hào)、密碼，確認(rèn)密碼，郵箱等。我們?cè)谇岸思尤氡韱悟?yàn)證，如賬號(hào)需要3-20個(gè)字符，密碼至少6字符等。這些簡(jiǎn)單的驗(yàn)證可以很容易實(shí)現(xiàn)，不過(guò)我們要實(shí)現(xiàn)ajax技術(shù)的實(shí)時(shí)驗(yàn)證，需要后端的PHP代碼的支持。

<form id="reg" name="form1" method="post" action="reg.php">
<label>賬號(hào)：</label><input type="text" id="username" name="username" />
<label>密碼：</label><input type="password" id="password" name="password" />
<label>確認(rèn)密碼：</label><input type="password" id="confirm_password" name="confirm_password" />
<label>電子郵箱：</label><input type="text" id="email" name="email" />
<input type="button" value="注冊(cè)" id="submit" />
</form>

接下來(lái)就是后端的PHP代碼，主要是進(jìn)行表單驗(yàn)證，如果表單數(shù)據(jù)已存在則提示用戶(hù)，否則插入新數(shù)據(jù)到數(shù)據(jù)庫(kù)。其中我們使用了PDO對(duì)數(shù)據(jù)庫(kù)進(jìn)行了操作，避免了SQL注入問(wèn)題。

<?php
require_once 'config.php';
$username = htmlspecialchars($_POST['username']);
$password = htmlspecialchars($_POST['password']);
$email = htmlspecialchars($_POST['email']);
try {
$pdo = new PDO($dsn, $user, $pass); //連接數(shù)據(jù)庫(kù)
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //異常處理模式
$pdo->exec("set names 'utf8'");
$stmt = $pdo->prepare('SELECT * FROM users WHERE username=?');
$stmt->execute(array($username));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ($row) {
echo 'exist_username';
} else {
$activite_code = md5(time());
$password_md5 = md5($password);
$sql = "INSERT INTO users (username, password, email, activite_code) VALUES (?, ?, ?, ?)";
$stmt = $pdo->prepare($sql);
$stmt->execute(array($username, $password_md5, $email, $activite_code));
echo 'success';
} 
} catch (PDOException $e) {
echo 'error';
}
?>

如上，我們實(shí)現(xiàn)了注冊(cè)表單的后端驗(yàn)證及提交，然而提交后頁(yè)面需要刷新才能看到結(jié)果，用戶(hù)體驗(yàn)不盡如人意。接下來(lái)我們使用ajax實(shí)現(xiàn)實(shí)時(shí)交互驗(yàn)證，我們?cè)谇岸舜a中為提交按鈕綁定了click事件，然后使用ajax向后臺(tái)提交數(shù)據(jù)，根據(jù)后臺(tái)返回的結(jié)果進(jìn)行不同的調(diào)整，如出現(xiàn)已存在的賬號(hào)，則在相應(yīng)標(biāo)簽內(nèi)提示用戶(hù)即可。

$(document).ready(function(){
$("#submit").click(function(){
//獲取用戶(hù)輸入數(shù)據(jù)
var username = $("#username").val();
var password = $("#password").val();
var confirm_password = $("#confirm_password").val();
var email = $("#email").val();
//驗(yàn)證數(shù)據(jù)的合法性(前端)
//使用ajax提交數(shù)據(jù)
$.ajax({
type: "POST",
url: "reg.php",
data: {username:username,password:password,confirm_password:confirm_password,email:email},
dataType: "html",
success: function(data){
//根據(jù)返回結(jié)果進(jìn)行處理
if(data == "exist_username"){
$("#username_tip").html("賬號(hào)已存在");
}else if(data == "success"){
alert("注冊(cè)成功！");
}else{
alert("注冊(cè)失敗！");
}
}
});
});
});

至此，我們就成功地用ajax技術(shù)實(shí)現(xiàn)了注冊(cè)表單的實(shí)時(shí)交互驗(yàn)證，使得用戶(hù)體驗(yàn)得到了很大提升。當(dāng)然，由于使用了前后端分離的技術(shù)，也使得代碼更加清晰，易于維護(hù)與擴(kuò)展。建議小伙伴們可以試一下哦。