ajax--表單和ajax分別使用get、post方法向后台傳輸數據

為了前端與后台進行交互，我們使用ajax來完成這些功能。

我們首先了解，什么是ajax？

Asynchronous JavaScript and XML

通過在后台與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新，可以局部刷新而不必整個頁面整體刷新。

如何與服務器進行數據交換？

首先，需要自己搭建服務器，在服務端的環境中可運行PHP語言

從網頁進入服務器有三種基本方式：

1.   localhost:+端口號
2.   127.0.0.1+端口號
3.   ip+端口號

然后，和服務器端的php頁面建立聯系

大致分為兩種。一種是通過form表單向后台傳輸數據。一種是通過ajax向后台傳輸數據。

第一種：通過form表單向后台傳輸數據。

如下例子：在html頁面中的form表單中，與 05.2.php 建立聯系 ，數據傳遞方式為POST。

<form action="05.2.php" method="post">
    <input type="text" placeholder="請輸入用戶名" name="userName">
    <input type="submit" placeholder="登錄">
</form>

下面是05.2.php頁面的內容：

<?php
    echo "這個為post提交的頁面";
    echo $_POST['userName'];
    echo '<h1>'.$_POST['userName'].'歡迎你</h1>';   
        //在php中字符串拼接使用的是.
?>    

輸入 jj  結果如下：

如果使用get方式傳遞數據，則在php頁面中使用$_GET['']方法。

 

第二種：通過ajax向后台傳輸數據。

如下例子：

原生js版的，使用ajax發送get請求：

html頁面代碼：

用戶名：<input type="text" id="username">
            <span id="ts"></span>
            <button id="btn">驗證用戶名</button>
<script>
    var username = document.getElementById("username");
    var ts= document.getElementById("ts");
    var btn = document.getElementById("btn");
        // 點擊btn發送ajax請求。分為四小步
    btn.onclick = function(){
        // 1.創建xhr。由於兼容性問題，需要考慮IE5、IE6。
        var xhr;
        if(window.XMLHttpRequest){    //常規寫法
        xhr = new XMLHttpRequest();
        }else{   //IE5、IE6寫法
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.綁定監聽函數。通過狀態碼readyState（0: 請求未初始化，1: 服務器連接已建立，2: 請求已接收，3: 請求處理中，4: 請求已完成，且響應已就緒） 和 響應碼（1xx：信息類；2xx：成功（200）；3xx：重定向（304）；4xx客戶端錯誤（404）；5xx：服務端錯誤（502） ）
        xhr.onreadystatechange = function(){
        　　if(xhr.readyState == 4 && xhr.status == 200){
            　　if(xhr.responseText == 1){   //responseTest：獲得字符串形式的響應數據 。0和1 為php頁面的輸出文字，以此為判斷條件。
            　　ts.innerHTML = "該用戶名已經被注冊"
            　　}else if(xhr.responseText == 0){
            　　ts.innerHTML = "該用戶名可以使用"
            　　}
         　　}
         }          
         // 3.建立連接
         xhr.open("GET","08.php?uname=" + username.value,true);
         // 4.發送請求
         xhr.send()
    }   
</script>         

 

08.php 頁面代碼：

<?php
    $db = ['jack','mack','mary'];   //模擬數據庫
    $username = $_GET['uname'];  //表示從前台傳遞過來的參數
    $flag = false;
    foreach($db as $n){
        if($n === $username){
            $flag = true;
            break;
        }
    }
    if($flag){
        echo "1";
    }else{
        echo "0";
    }
?>

以此來達到 通過后台數據庫（$db）中是否有輸入框中相同的名字來判斷賬號是否注冊。並提示對應的提示文字。

 

原生js版的，使用ajax發送post請求：

html部分只有第三步和第四步有所不同

//第三步:
xhr.open('POST','http://localhost:端口號/資源文件/08.php',true);
//第三步和第四步中間還要加上一步： 在發送post請求的時候，你得告訴服務器你發送的是一個什么
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步：
xhr.send('strName=' + uname.value);
//如果傳遞的數據不只一個，通過字符串連接的方式繼續添加。比如  :  + '&strPassword=' + password.value

對應的php頁面獲取數據的方法也改為$_POST['strName']。功能根據需要修改。

 

jQuery版，使用ajax發送get請求：

html頁面：

$("#btn").click(function(){
     $.ajax({
         type : "GET",
         url : "08.php?uname=" + $("#username").val(),
         success : function(data){   //data就是原生的xhr.responseTextif(data == 0){
                 $("#ts").html("該用戶名可以使用").css("color","green");
             }else if(data == 1){
                 $("#ts").html("該用戶名已被占用").css("color","red");
             }
         },
         error : function(err){    //錯誤的
             console.log(err)
         }
     })
})

php頁面和原生jsPHP頁面相同。

 

jQuery版，使用ajax發送post請求：

和get相似，有一些區別：

//type：
type : "POST",
//url:
url : "php頁面地址"
//由於數據傳遞不通過域名傳遞，需要創建一個對象來傳遞數據。
data：{
      uname ： $("#username").val()  
},

其他相同。