ajax向伺服器發出get和post請求

標籤：出錯   err   echo   color   class   其他   span   typeof   ali   

假設有個網站A，它有一個簡單的輸入使用者名稱的頁面，介面上有兩個輸入框，第一個輸入框包含在一個form表單裡用來實現form提交，第二個輸入框是單獨的、沒有包含在form裡，下面就用這兩個輸入框來學習下jQuery的ajax。

 

1，前端的html和javascript代碼

頁面html

<main style="text-align: center; margin: 200px auto;">        <h2>輸入使用者名稱</h2>        <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">            <input id="user-name" type="text" name="username" placeholder="請填寫您的使用者名稱">            <input type="submit" name="submit1" value="form提交1" class="input">        </form>        <input id="user-name2" type="text" name="username2" placeholder="請填寫您的使用者名稱">        <input type="button" name="submit2" value="ajax提交2">        <div class="box">        </div>    </main>    <script src="../../js/jquery-3.1.0.min.js"></script>    <script src="demo01.js"></script>

View Code

頁面中引入的demo01.js代碼，注意此處實現的是一個簡單的GET請求。

$(function($) {    $(‘input[name=submit2]‘).on(‘click‘, function(e) {        let username = ‘‘;        if (‘‘ !== (username = $(‘#user-name2‘).val())) {            $.ajax({                url: `demo0.php?name=${username}`,                dataType: ‘json‘,                method: ‘GET‘,                success: function(data) {                    if (data.result == 1) {                        $(‘.box‘).html(`<div>你的姓名${username}已成功儲存。</div>`);                    }                },                error: function(xhr) {                    // 導致出錯的原因較多，以後再研究                    alert(‘error:‘ + JSON.stringify(xhr));                }            })            .done(function(data) {                // 請求成功後要做的工作                console.log(‘success‘);            })            .fail(function() {                // 請求失敗後要做的工作                console.log(‘error‘);            })            .always(function() {                // 不管成功或失敗都要做的工作                console.log(‘complete‘);            });        }    });});

View Code

jQuery的ajax()方法有兩種寫法，分別是： $.ajax(url [, settings]); 和 $.ajax([settings]); 兩種寫法都可以，感覺第一種方法適合用於參數較少的情況，比如，如果只是對一個url做一個簡單的請求，不對返回的資料、格式和錯誤有要求，只需要傳遞一個url參數就可以，那就可以用第一種寫法。上面的demo01.js中採用的是第二種寫法，下面解釋下參數和相關的函數。

（1）上面代碼中ajax()的參數
可以看到這裡的參數類型都是javascript對象，即都是 o = {key: value}; 這種類型的資料。jQuery的文檔中規定了，這裡的參數只能是PlainObject（物件類型的對象），不能是null、自訂的數組、或者像docement這種歸屬於某種執行環境(比如瀏覽器)屬於某種類型的對象。這裡不太好說清楚，可以做個小實驗。在命令列裡開啟node repl，進行下測試：

> node> typeof(null);‘object‘> typeof([]);‘object‘> typeof(document);‘undefined‘> typeof({});‘object‘

View Code

可以看到null、[](數群組類型)、{}(物件類型)都是對象。因為在js中一切皆對象。而在互動式環境中，document則是未定義的一個變數，所以它的類型是undefined。如果在瀏覽器環境下測試下typeof(document)，那麼它的類型也是object。下面逐個解釋下代碼用到的參數：

url，要請求的url地址，它的值應該是包含url的字串。

dataType，字串。發出請求後，期望從伺服器返回的資料類型。可以指定的類型有xml、html、script、json、jsonp、text。如果不指定，jquery會基於MIME做判斷，並會返回一個下面xml、json、script、html當中的一種類型。

method，字串。HTTP要求方法，預設為GET，上面代碼中指定為POST。

success， Type: Function( Anything data, String textStatus, jqXHR jqXHR ) ，匿名函數。HTTP請求成功後要調用的函數，可以傳遞三個參數給它：從伺服器返回的資料（如果上面指定了dataType，則伺服器返回的資料類型需要與上面dataType指定的類型一致）、一個可以描述狀態的字串textStatus、還有一個jqXHR對象。可以看到上面只傳遞了從伺服器返回的資料data。

error， Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) ，匿名函數。HTTP請求失敗後要調用的函數，同樣也可以傳遞三個參數。

除了用到的這些參數，還有許多其他的如：async、dataFilter、mimeType等其他參數，不過現在的這個簡單的指令碼還用不到那麼多參數。

（2）“消極式載入函數”

上面代碼中 $.ajax().done().fail().always() jqXHR.done()、jqXHR.fail()、jqXHR.always()中分別可以添加deferred對象被解析、被拒絕、被解析或被拒絕這三種情況下的要處理的工作，比如添加個函數什麼的。為什麼能夠這麼做呢，這要看$.ajax()返回了什麼，它返回的是jqXHR對象(jquery版本大於1.5時)。這個對象實現了Promise interface（Promise機制，用來傳遞非同步作業訊息，代表了某個未來才會知道結果的事件）。這就允許在一次請求中添加多個回呼函數，甚至可以在請求完成後添加回呼函數。

標題“消極式載入”描述的不夠準確，但從效果上看是有消極式載入的效果。關於這個問題更詳細的解釋可以參考jQuery文檔中對jqXHR的解釋 或一位前端前輩的解釋jQuery的deferred對象詳解 。

2，後端運行在nginx伺服器上的php代碼

後端的邏輯很簡單：我們把前端擷取的資料儲存到名為data-demo01的檔案中，儲存成功則向前端返回一個1作為標誌。

（1）前端ajax發起GET請求

如果前端的ajax發起的是一個GET請求，那麼後端也比較好處理：

if (isset($_GET[‘name‘]) && !empty($_GET[‘name‘])) {        $username = trim($_GET[‘name‘]);        if (file_put_contents(‘data-demo01‘, $username)) {            echo ‘{"result": 1}‘;        }         }

View Code

（2）前端ajax發起POST請求

js代碼中需要修改下ajax()的url、method參數，並增加一個data參數，修改後如下：

// 相同的代碼省略$.ajax({    url: `demo01.php`,    dataType: ‘json‘,    method: ‘POST‘,    data: {"username": username},// 相同的代碼省略

View Code

因為用POST傳遞資料，所以去掉url中用來傳遞資料的參數，下面的data類型要與dataType一致，為json格式，然後將username作為值傳遞。

那麼後端的代碼也就可以確定了：

if (isset($_POST[‘username‘]) && !empty($_POST[‘username‘])) {        $username = trim($_POST[‘username‘]);        if (file_put_contents(‘data-demo01‘, $username)) {            echo ‘{"result": 1}‘;        }    }

View Code

如果不出錯的話，名字應該被儲存了。

ajax向伺服器發出get和post請求