需要注意的是，調(diào)用的封裝的數(shù)據(jù)庫(kù)，和jQuery的保存地址
一、注冊(cè)
（1）寫文本框來進(jìn)行用戶名的驗(yàn)證
input type="text" id="uid" />
span id="tishi">/span> //這個(gè)使用來顯示提示信息的
（2）用jQuery語句寫：用戶名存在不能使用，用戶名可以使用
$("#uid").blur(function(){
//取用戶名
var uid = $(this).val();
//查數(shù)據(jù)庫(kù)，調(diào)ajax
$.ajax({ //ajax方法中必須是json格式
url: "zhucecl.php", //處理頁(yè)面的地址
data:{u:uid}, //這里是Json的格式:u是起的個(gè)名字，uid才是值
type:"POST", //數(shù)據(jù)提交方式
dataType:"TEXT", //返回的數(shù)據(jù)格式:字符串格式
success:function(data){ //成功的話返回匿名函數(shù)（回調(diào)函數(shù)）
//執(zhí)行處理頁(yè)面成功后的語句
var str = "";
if(data=="OK")
{
str = "用戶名可以使用";
$("#tishi").css("color","green");
}
else
{
str = "已有用戶名";
$("#tishi").css("color","red");
}
$("#tishi").text(str);
}
});
})
（3）注冊(cè)的處理頁(yè)面：寫了很多遍的了，不再一句句解釋
?php
//調(diào)封裝好的類：注意保存位置
include("DBDA.class.php");
$db = new DBDA();
//傳的值起的名字
$uid = $_POST["u"];
$sql = "select count(*) from renyuan where username='{$uid}'";
//調(diào)用封裝的函數(shù)
$attr =$db->Query($sql);
//判斷用戶名是否存在
if($attr[0][0]>0)
{
echo "NO"; //有重復(fù)的用戶名
}
else
{
echo "OK"; //沒有重復(fù)的用戶名
}
?>
二、登錄
（1）寫文本框和登錄按鈕
div>賬號(hào)：input type="text" id="uid" />/div>
div>密碼：input type="password" id="pwd" />/div>
input type="button" value="登錄" id="btn" />
（2）寫jQuery的語句
$("#btn").click(function(){
var uid=$("#uid").val(); //找到用戶
var pwd=$("#pwd").val(); //找到密碼
//調(diào)ajax方法，里面要用json格式
$.ajax({
url:"denglucl.php", //登陸的處理頁(yè)面
data:{uid:uid,pwd:pwd},
type:"POST",
dataType:"text",
success: function(data)
{
if(data.trim()=="OK")
{
window.location.href="zhuce.php" rel="external nofollow" ; //用戶名密碼正確，進(jìn)入一個(gè)頁(yè)面
}
else
{
alert("用戶名密碼輸入錯(cuò)誤");
}
}
})
})
（3）登陸的處理頁(yè)面：寫了很多遍的了，不再一句句解釋
?php
include("DBDA.class.php");
$db = new DBDA();
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
$sql = "select mima from huiyuan where yonghu='{$uid}'";
$attr = $db->Query($sql);
if(!empty($pwd) !empty($attr) $attr[0][0]==$pwd) //密碼不為空，數(shù)組不為空，輸入密碼和查出的密碼是否相同
{
echo "OK";
}
else
{
echo "ON";
}
登錄成功 ：
三、ajax的數(shù)據(jù)處理
（1）先把名稱行顯示出來，正常編輯就可以，想顯示的內(nèi)容
table width="100%" border="1" cellpadding="0" cellspacing="0">
tr>
td>代號(hào)/td>
td>名稱/td>
td>價(jià)格/td>
td>產(chǎn)地/td>
td>庫(kù)存/td>
td>操作/td>
/tr>
/table>
（2）再寫個(gè)顯示內(nèi)容的表
tbody id="bg">
//里面放遍歷的某個(gè)表中的數(shù)據(jù)內(nèi)容
/tbody>
（3）寫jQuery，頁(yè)面加載完成后再執(zhí)行
$(document).ready(function(e) {
$.ajax({
url:"xianshicl.php",
dataType:"TEXT",
success: function(data){
//處理頁(yè)面處理完成后執(zhí)行的
});
（4）編寫顯示數(shù)據(jù)處理頁(yè)面（兩種方法）
include("DBDA.class.php"); //調(diào)用封裝好的類：注意存在位置
$db = new DBDA(); //造新對(duì)象
$sql = "select * from fruit"; //寫sql語句
echo $db->StrQuery($sql); //1.調(diào)用封裝好的拼接數(shù)組為字符串的方法
/* //2.
$attr = $db->Query($sql); //調(diào)用封裝類中的方法來執(zhí)行sql語句
$str = "";
foreach($attr as $v)
{
$str .= implode("^",$v)."|"; //拼接數(shù)組為字符串
}
echo substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不顯示br>*/
（5）處理頁(yè)面結(jié)束后，在主頁(yè)面的ajax中的成功方法中寫入處理頁(yè)面結(jié)束后的語句
success: function(data){
var hang = data.split("|"); //拆分字符“|”串：顯示行
var str = "";
for(var i=0;ihang.length;i++)
{
var lie = hang[i].split("^"); //拆分字符串“^”:顯示列
str += "tr>td>"+lie[0]+"/td>td>"+lie[1]+"/td>td>"+lie[2]+"/td>td>"+lie[3]+"/td>td>"+lie[5]+"/td>td>操作/td>/tr>"; //顯示的行和單元格
}
$("#bg").html(str);
}
這樣就顯示了：
以上這篇關(guān)于ajax的使用方法_例題、ajax的數(shù)據(jù)處理就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 分享Ajax創(chuàng)建簡(jiǎn)單實(shí)例代碼
- 原生ajax調(diào)用數(shù)據(jù)實(shí)例講解
