快捷導(dǎo)航

Ajax基礎(chǔ)與登入教程

更新時(shí)間：2017年03月13日 09:54:58 作者：我之姓冠你之名

Ajax 是 Asynchronous JavaScript and XML的縮寫。其優(yōu)點(diǎn)可以減輕服務(wù)器的負(fù)擔(dān),按需取數(shù)據(jù),最大程度的減少冗余請(qǐng)求。接下來(lái)通過(guò)本文給大家介紹Ajax基礎(chǔ)與登入教程，需要的的朋友參考下

Ajax 是 Asynchronous JavaScript and XML的縮寫。

Ajax的優(yōu)點(diǎn)：

優(yōu)點(diǎn)：減輕服務(wù)器的負(fù)擔(dān),按需取數(shù)據(jù),最大程度的減少冗余請(qǐng)求

局部刷新頁(yè)面,減少用戶心理和實(shí)際的等待時(shí)間,帶來(lái)更好的用戶體驗(yàn)

基于xml標(biāo)準(zhǔn)化,并被廣泛支持,不需安裝插件等

進(jìn)一步促進(jìn)頁(yè)面和數(shù)據(jù)的分離

Ajax包含下列技術(shù)：

基于web標(biāo)準(zhǔn)（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）進(jìn)行動(dòng)態(tài)顯示及交互；

使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作；

使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起。　　

也就是說(shuō)Ajax最大的特點(diǎn)就是可以實(shí)現(xiàn)動(dòng)態(tài)不刷新

使用Ajax：

例子：

在數(shù)據(jù)庫(kù)中的一張表：

實(shí)現(xiàn)點(diǎn)擊查看用戶名是否可用：

主頁(yè)面代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>
  </head>
  <body>
    輸入一個(gè)用戶名：<input type="text" id="zhang" />
    <span id="tishi"></span>
  </body>
</html>
<script>
  //給文本框加上事件
  $("#zhang").blur(function(){
    //1取內(nèi)容
    var zhang = $(this).val();
    //val取到表單元素、給變量
    //2將取到的內(nèi)容內(nèi)容區(qū)數(shù)據(jù)庫(kù)驗(yàn)證
    //調(diào)用Ajax
    $.ajax({
      type:"POST",
      //提交方式
      url:"chuli.php",
      //請(qǐng)求哪一個(gè)php文件（請(qǐng)求地址）
      data:{yhm:zhang},
      //給zhang取名yhm，傳過(guò)去，是一個(gè)json
      //請(qǐng)求處理頁(yè)面需不需要傳數(shù)據(jù)過(guò)去，不需要傳不用寫
      dataType:"TEXT",
      //處理頁(yè)面返回的類型:TEXT字符串 JSON,JSON，XML，只有三種類型
      success:function(data){
        //回調(diào)函數(shù)
//        data為返回的值
        //成功之后要調(diào)用的函數(shù)
        if(data==0)
        {
          //如果為0
          $("#tishi").text("該用戶名為0；可用！");
          $("#tishi").css("color","green");
        }
        else
        {
          $("#tishi").text("該用戶名已存在；不可用！");
          $("#tishi").css("color","brown");
        }
      }
    });
    //3給出提示
  })
</script>

接下來(lái)做處理頁(yè)面：

<?php
$zhang = $_POST["yhm"];
//取值
include("db.class.php");
$db = new db();
$sql = "select count(*) from mydb where zhang = '{$zhang}'";
$arr = $db->Query($sql);
echo $arr[0][0];
//直接輸出相當(dāng)于返回
?>

圖：

輸入已存在用戶名：

輸入不存在的用戶名：

再來(lái)寫一個(gè)登入：

登入頁(yè)面的代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登入頁(yè)面</h1>
<div>帳號(hào)<input type="text" id="zhang"/></div>
<div>密碼<input type="text" id="mi"/></div>
<input type="button" id="btn" value="登入"/>
</body>
</html>
<script>
  $("#btn").click(function(){
    //1取數(shù)據(jù)
    var zhang = $("#zhang").val();
    var mi = $("#mi").val();
    //2驗(yàn)證數(shù)據(jù)
    $.ajax({
      url:"drcl.php",
      data:{zhang:zhang,mi:mi},
      type:"POST",
      dataType:"TEXT",
      success:function (data) {
        //回調(diào)函數(shù)
        //判斷返回值
        if(data=="ok")
        {
          window.location.href = "zym.php";
        }
        else
        {
          alert("用戶名或密碼錯(cuò)誤");
        }
      }
    });
    //提示
  })
</script>

接下來(lái)是登入處理頁(yè)面：

<?php
include ("db.class.php");
$db = new db();
$zhang = $_POST["zhang"];
$mi = $_POST["mi"];
//取值
$sql = "select mi from mydb WHERE zhang = '{$zhang}'";
$arr = $db->Query($sql);
if($arr[0][0]==$mi && !empty($mi))
{
  echo "ok";
}
else
  {
    echo "no";
  }
?>

來(lái)看一下圖，如果輸入的不對(duì) 直接在本頁(yè)面提示：