Ajax 概念分析舉例

時間 2019-12-08

標籤 ajax 概念分析舉例欄目 Ajax 简体版

原文原文鏈接

Ajax是結合了訪問數據庫，數據訪問，Jquery 能夠作頁面局部刷新或者說是頁面不刷新，我可讓頁面不刷新，僅僅是數據的刷新，沒有頻繁的刷頁面，是如今比較經常使用的一種方式作頁面
那麼它是怎麼實現頁面無刷新的呢？接下來咱們一塊兒看下原理javascript

先看下以前咱們刷新頁面的方式原理php

再看下Ajax的原理css

Ajax最大的特色就是這個頁面總體上所有使用的是JS 腳本語言或者是Jquery都行，這倆都是前端的語言，運行的時候不須要到服務器端運行，只要在瀏覽器下就能夠執行，因此Ajax就利用了這一點，使用Jquery，JS來操做前端頁面的數據。前端

好比說：作一個查詢，我須要先取出用戶給的數據，我JS取出來，而後發送到一個地方去，讓另一個地方去處理，處理完後返回給我。而後JS拿這個數據把內容替換掉，因此全部的工做都是拿JS完成的java

這種模式執行的時候就不會有頁面的刷新，由於這個頁面沒有從新請求，這個頁面裏僅僅變的是數據jquery

接下來咱們看一下Ajax怎麼來實現ajax

舉例：判斷用戶名是否在數據庫裏面存在sql

通常ajax是用Jquery來寫，首先咱們先給Uid這個文本框加一個事件blur（失去焦點觸發），接着取用戶名，從數據庫查，看是否能查到。取到用戶名後下一步咱們就要查數據庫，JS不能直接查，因此調ajax！！$.ajax()這是一個方法！！數據庫

調這個方法的時候須要傳一個參數，這個參數須要是JSON數據格式瀏覽器

JSON裏面用逗號分割，不是分號

第一個參數就是url表明的是把數據傳到哪一個頁面處理，頁面的地址是什麼

第二個參數就是data表明的是我調用testchuli.php的時候我要傳遞什麼數據給它，要求也是一個JSON格式，花括號裏你傳幾條數據就寫幾個值，如今咱們要傳一個

{名字 u : 傳哪一個值 uid}冒號前面的就是個名字，冒號後邊的會解析變量

第三個參數就是type表明的是傳值的方式

第四個參數就是dataType 注意 T 要大寫表明是返回數據的格式，

若是寫XML返回數據類型必須是XML，若是寫JSON返回數據類型必須是JSON

若是寫TEXT返回數據必須是字符串都是大寫

第五個參數就是success表明的是成功，當處理頁面執行成功以後，必須跟個匿名函數

匿名函數裏面必須有個參數，這個方法有個名詞叫回調函數

<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">


</style>
</head>

<body>
<input type="text" id="uid"/>
<span id="tishi"></span>
</body>
<script type="text/javascript">
$("#uid").blur(function(){
         //取用戶名
         var uid = $(this).val();
         //查數據庫，調ajax
         $.ajax({
                 url:"testchuli.php",//處理頁面地址
                 data:{u:uid},//要傳遞的數據(提交)
                 type:"POST", //提交方式
                 dataType:"TEXT", //返回數據格式
                 success:function(data){   //回調函數
                           var str = "";
            
                           if(data=="OK")
                           {
                              str = "該用戶名可用";
                              $("#tishi").css("color","green");
                           }
                           else
                           {
                               str = "該用戶名存在";
                               $("#tishi").css("color","red");
                           }
                           $("#tishi").text(str);
                     
                     }
             
             })
    
    })

    
</script>

接下來咱們作一下處理頁面

<?php
include("FZL.class.php");
$db = new FZL();

$uid = $_POST["u"];
$sql = "select count(*) from login where username='{$uid}'";

$attr = $db->Query($sql);

if($attr[0][0]>0)
{
    echo "NO";
}
else
{
    echo "OK";
}

再作一個登陸的練習：

<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">


</style>
</head>

<body>
<div>帳號：<input type="text" id="uid"/></div>
<div>密碼：<input type="password" id="pwd"/></div>
<input type="button" value="登陸" id="btn" />

</body>
<script type="text/javascript">
$("#btn").click(function(){
        //取用戶名和密碼
        var uid = $("#uid").val();
        var pwd = $("#pwd").val();
        //調ajax
        $.ajax({
              url:"logincl.php",
              data:{u:uid,p:pwd},
              type:"POST",
              dataType:"TEXT",
              success: function(data){
                      if(data.trim()=="OK")
                      {
                          window.location.href="test.php";
                      }
                      else
                      {
                          alert("用戶名或密碼錯誤");
                      }
                  }
            });
    
    })
         
</script>

再作一下處理頁面

<?php
include("FZL.class.php");
$db = new FZL();
$uid = $_POST["u"];
$pwd = $_POST["p"];

$sql = "select count(*) from login where username='{$uid}'";
$attr = $db->Query($sql);
if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd)
{
    echo "OK";    
}
else
{
    echo "NO";
}