Ajax基礎與登入教程

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

Ajax 是 Asynchronous JavaScript and XML的縮寫。其優(yōu)點可以減輕服務器的負擔,按需取數據,最大程度的減少冗余請求。接下來通過本文給大家介紹Ajax基礎與登入教程，需要的的朋友參考下

Ajax 是 Asynchronous JavaScript and XML的縮寫。

Ajax的優(yōu)點：

優(yōu)點：減輕服務器的負擔,按需取數據,最大程度的減少冗余請求

局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗

基于xml標準化,并被廣泛支持,不需安裝插件等

進一步促進頁面和數據的分離

Ajax包含下列技術：

基于web標準（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）進行動態(tài)顯示及交互；

使用 XML 和 XSLT 進行數據交換及相關操作；

使用 XMLHttpRequest 進行異步數據查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起?！　?/p>

也就是說Ajax最大的特點就是可以實現動態(tài)不刷新

使用Ajax：

例子：

在數據庫中的一張表：

實現點擊查看用戶名是否可用：

主頁面代碼：

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

接下來做處理頁面：

<?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];
//直接輸出相當于返回
?>

圖：

輸入已存在用戶名：

輸入不存在的用戶名：

再來寫一個登入：

登入頁面的代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登入頁面</h1>
<div>帳號<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取數據
    var zhang = $("#zhang").val();
    var mi = $("#mi").val();
    //2驗證數據
    $.ajax({
      url:"drcl.php",
      data:{zhang:zhang,mi:mi},
      type:"POST",
      dataType:"TEXT",
      success:function (data) {
        //回調函數
        //判斷返回值
        if(data=="ok")
        {
          window.location.href = "zym.php";
        }
        else
        {
          alert("用戶名或密碼錯誤");
        }
      }
    });
    //提示
  })
</script>

接下來是登入處理頁面：

<?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";
  }
?>

來看一下圖，如果輸入的不對直接在本頁面提示：

輸入的對就跳轉：

用Ajax寫登入的好處就是提示錯誤的時候不用跳到別的頁面。

以上所述是小編給大家介紹的Ajax基礎與登入教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

H5移動開發(fā)Ajax上傳多張Base64格式圖片到服務器
這篇文章主要為大家詳細介紹了H5移動開發(fā)Ajax上傳多張Base64格式圖片到服務器，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
[asp]天楓AJAX百度音樂即時聽附下載
[asp]天楓AJAX百度音樂即時聽附下載...
2007-09-09
ajax的json傳值方式在jsp頁面中的應用
ajax的json傳值想必大家早有所耳聞了吧，本文介紹下jsp頁面中json傳值應用，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
Ajax請求跨域問題解決方案分析
這篇文章主要介紹了Ajax請求跨域問題解決方案,結合具體實例形式分析了Ajax請求跨域問題的原理、解決方法及相關操作注意事項,需要的朋友可以參考下
2019-05-05
Ajax實現phpcms 點贊功能實例代碼
這篇文章主要介紹了Ajax實現phpcms 點贊功能實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
使用Ajax進行文件與其他參數的上傳功能(java開發(fā))
這篇文章主要介紹了使用Ajax進行文件與其他參數的上傳功能(java開發(fā)),非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-01-01
ajaxrequest.js ajaxrequest 0.7最新版使用AJAXRequest進行AJAX應用程序開發(fā)入
ajaxrequest.js ajaxrequest 0.7最新版使用AJAXRequest進行AJAX應用程序開發(fā)入門小技巧...
2007-12-12
Ajax實現上傳圖像功能的示例詳解
這篇文章主要介紹了如何利用Ajax實現上傳圖像,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-04-04
Ajax 無刷新在注冊用戶名時判斷是否為空是否被使用
這篇文章主要介紹了Ajax 無刷新在注冊用戶名時判斷是否為空是否被使用,需要的朋友可以參考下
2014-05-05
Ajax入門學習教程（一）
AJAX（Asynchronous JavaScript And XML）翻譯成中文就是“異步Javascript和XML”。下面簡單給大家介紹了ajax入門學習知識，需要的的朋友參考下吧
2017-02-02