細說 jQuery Ajax操作篇（二） - 數據傳遞

paulli3 發布于2019-08-21 12:21 / 2753人閱讀

摘要：在前一篇介紹的數據加載中的例子都是從靜態的文件中取得數據，而更大的價值在于與后端服務器進行數據傳遞，動態地請求和發送數據。首先用方式請求數據方式點擊標簽后，當前頁面為數據請求成功。

在前一篇介紹 jQuery Ajax 的數據加載中的例子都是從靜態的文件中取得數據，而 Ajax 更大的價值在于與后端服務器進行數據傳遞，動態地請求和發送數據。

請求數據

我們可以使用 GET、POST 兩種方式向后端請求數據，這里以 PHP 為例，假設有測試頁面 age.php，用于返回年齡信息，內容為：

if(isset($_REQUEST["name"]) && $_REQUEST["name"] == "stephen") {
    echo "23";
}

當前頁面內容為：


  stephen
  age :

我們希望點擊 a 標簽后，在不刷新頁面的前提下獲取年齡信息。首先用 GET 方式請求數據:

GET 方式

  $("a").click(function(e) {
    e.preventDefault();//
    var url = $(this).attr("href"),
      name = $(this).text(),
      requestData = {"name": name};

    $.get(url, requestData, function(data) {
      $("#sex").html(data);
    });
  });

點擊 a 標簽后，當前頁面為：

數據請求成功。我們再用 POST 方式測試下：

POST 方式

  $("a").click(function(e) {
    e.preventDefault();//
    var url = $(this).attr("href"),
      name = $(this).text(),
      requestData = {"name": name};

    $.post(url, requestData, function(data) {
      $("#sex").html(data);
    });
  });

代碼幾乎一樣，只是由 get 方法變為了 post 方法。
這里我們其實還可以用 load 方法簡化代碼：

  $("a").click(function(e) {
    e.preventDefault();
    var url = $(this).attr("href"),
      name = $(this).text(),
      requestData = {"name": name};

    $("#sex").load(url, requestData);
  });

發送數據

除了可以使用 Ajax 技術從后端獲取數據，還可以向后端發送數據，常見的就是異步提交表單的情景，這里以用戶驗證為例：


  username:
  password:

假設當用戶名為 stephenlee，密碼為 123456 時驗證通過，否則失敗，測試頁面 validate.php 為：

if($_REQUEST["username"] == "stephenlee" && $_REQUEST["password"] == "123456") {
    echo "pass";
} else {
    echo "fail";
}

使用 get 方式發送數據到后端驗證：

  $("form").submit(function(e) {
    e.preventDefault();//
    var url = $(this).attr("action"), 
      username = $("input[name="username"]").val(),
      password = $("input[name="password"]").val(),
      requestData = {"username": username, "password": password};

    $.get(url, requestData, function(result) {
      alert(result);
    });
  });

輸入錯誤用戶名 lucas 后，結果為：

輸入正確用戶名 stephenlee 后，結果為：

使用 post 方式發送數據思路相同，就不再贅述了。

參考

http://book.douban.com/subject/24669823/

GPU云服務器云服務器 jquery_ajax參數傳遞 jquery操作ajax 值傳遞ajax數據傳遞excel jquery ajax 數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87553.html

細說 jQuery Ajax操作篇（三） - 過程處理

摘要：觀察函數和函數可以用來作為觀察函數，我們可以使用觀察函數的回調函數來做相應的處理。當請求開始且尚未進行其他傳輸時，會觸發的回調函數。當最后一次活動請求終止時，則會執行通過注冊的回調函數。對于 jQuery 通過 Ajax 方式傳遞數據時，我們還可以在過程中進行一定的處理，以便達到我們的需求。觀察函數 ajaxStart 和 ajaxStop 函數可以用來作為觀察函數，我們可以使...

Imfan 2019-08-19 14:56 評論0 收藏0
細說 jQuery Ajax操作篇（一） - 數據加載

摘要：同樣將其綁定在按鈕點擊事件上查看結果為這里需要注意，如果文檔內的格式錯誤，雖然不會報錯，但是將無法執行回調函數。 Ajax 通俗來講即不需要刷新頁面即可從服務器或客戶端上加載數據，當然這些數據的格式是多種多樣的。加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設當前頁面為： load showImg(http://segmen...

paulli3 2019-08-21 12:21 評論0 收藏0
細說 jQuery DOM操作篇（二） - DOM 樹操作

摘要：此時，點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容方法同理。我們知道通過 $() 函數可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內容，實際上，我們還可以通過該函數做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結構。創建元素我們可以通過 $() ...

Anchorer 2019-08-21 12:20 評論0 收藏0
細說 jQuery 元素篇（二） - 選擇符

摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規范中的所有選擇符。舉例如下： ...

104828720 2019-08-19 14:51 評論0 收藏0
細說 jQuery 插件篇（一） - 添加全局函數

摘要：添加全局函數所謂全局函數就是對象的方法，例如在一篇中介紹的等方法。當我們希望將一些功能性代碼重復使用，可以將其打包成一個 jQuery 插件來使用。使用 $ 別名首先我們在編寫插件時必須保證 jQuery 庫已經載入，但是我們不能保證 $ 一定可用，為了使用 $ 別名，我們可以利用 IIFE （Immediately Invoked Function Expression），...

joyvw 2019-08-19 14:55 評論0 收藏0