關(guān)于ajax的使用方法_例題、ajax的數(shù)據(jù)處理

更新時(shí)間：2017年05月24日 08:30:10 投稿：jingxian

下面小編就為大家?guī)?lái)一篇關(guān)于ajax的使用方法_例題、ajax的數(shù)據(jù)處理。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

需要注意的是，調(diào)用的封裝的數(shù)據(jù)庫(kù)，和jQuery的保存地址

一、注冊(cè)

（1）寫(xiě)文本框來(lái)進(jìn)行用戶名的驗(yàn)證

<input type="text" id="uid" />
<span id="tishi"></span> //這個(gè)使用來(lái)顯示提示信息的

（2）用jQuery語(yǔ)句寫(xiě)：用戶名存在不能使用，用戶名可以使用

$("#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è)面成功后的語(yǔ)句
      var str = "";
                 
      if(data=="OK")
      {
      　　str = "用戶名可以使用";
      　　$("#tishi").css("color","green");
      }
      else
      {
      　　str = "已有用戶名";  
      　　$("#tishi").css("color","red");
      }
      $("#tishi").text(str);
    　　}
　　　　　　});     
})

（3）注冊(cè)的處理頁(yè)面：寫(xiě)了很多遍的了，不再一句句解釋

<?php
//調(diào)封裝好的類(lèi)：注意保存位置
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";  //沒(méi)有重復(fù)的用戶名
}
 
?>

二、登錄

（1）寫(xiě)文本框和登錄按鈕

<div>賬號(hào)：<input type="text" id="uid" /></div>
<div>密碼：<input type="password" id="pwd" /></div>
<input type="button" value="登錄" id="btn" />

（2）寫(xiě)jQuery的語(yǔ)句　　

$("#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è)面：寫(xiě)了很多遍的了，不再一句句解釋

<?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）先把名稱行顯示出來(lái)，正常編輯就可以，想顯示的內(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）再寫(xiě)個(gè)顯示內(nèi)容的表

<tbody id="bg">
　　//里面放遍歷的某個(gè)表中的數(shù)據(jù)內(nèi)容
</tbody>

（3）寫(xiě)jQuery，頁(yè)面加載完成后再執(zhí)行

$(document).ready(function(e) {
　　$.ajax({
  url:"xianshicl.php",  
  dataType:"TEXT",
  success: function(data){
    //處理頁(yè)面處理完成后執(zhí)行的
    　　 });

（4）編寫(xiě)顯示數(shù)據(jù)處理頁(yè)面（兩種方法）

include("DBDA.class.php"); //調(diào)用封裝好的類(lèi)：注意存在位置
$db = new DBDA(); //造新對(duì)象
   
$sql = "select * from fruit"; //寫(xiě)sql語(yǔ)句
   
echo $db->StrQuery($sql);  //1.調(diào)用封裝好的拼接數(shù)組為字符串的方法
/* //2.
$attr = $db->Query($sql); //調(diào)用封裝類(lèi)中的方法來(lái)執(zhí)行sql語(yǔ)句
$str = "";
foreach($attr as $v)
{
　　$str .= implode("^",$v)."|"; //拼接數(shù)組為字符串
}
       
echo substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不顯示<br>*/

（5）處理頁(yè)面結(jié)束后，在主頁(yè)面的ajax中的成功方法中寫(xiě)入處理頁(yè)面結(jié)束后的語(yǔ)句

success: function(data){
　　var hang = data.split("|"); //拆分字符“|”串：顯示行
           
　　var str = "";
　　for(var i=0;i<hang.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);
}

這樣就顯示了：