首頁 > web前端 > js教程 > 主體

解析 jQuery Ajax操作(二)之 資料傳遞

零下一度
發布: 2017-06-17 17:51:11
原創
1073 人瀏覽過

在前一篇介紹<a href="//m.sbmmt.com/wiki/1495.html" target="_blank">jquery</a> Ajax 的資料載入中的範例都是從靜態的檔案取得數據,而Ajax 更大的價值在於與後端伺服器進行資料傳遞,動態地請求和發送資料。

請求資料

我們可以使用GET、POST 兩種方式向後端請求數據,這裡以PHP 為例,假設有測試頁面age.php,用於傳回年齡訊息,內容為:

if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') {
    echo '23';
}
登入後複製

目前頁面內容為:

<p>
  <a href="age.php">stephen</a>
  <span>age : </span>
  <span id="sex"></span>
</p>
登入後複製

细说 jQuery Ajax操作篇(二) - 数据传递

我們希望點擊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 標籤後,目前頁面為:

细说 jQuery Ajax操作篇(二) - 数据传递

#資料請求成功。我們再用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 技術從後端取得數據,還可以向後端發送數據,常見的就是異步提交表單的情景,這裡以用戶驗證為例:

<form action="validate.php">
  username:<input id="username" name="username" type="text" />
  password:<input id="password" name="password" type="text" />
  <input value="submit" type="submit" />
</form>
登入後複製

细说 jQuery Ajax操作篇(二) - 数据传递

假設當用戶名為 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 後,結果為:

细说 jQuery Ajax操作篇(二) - 数据传递

輸入正確使用者名稱stephenlee 後,結果為:

细说 jQuery Ajax操作篇(二) - 数据传递

使用post 方式傳送資料想法相同,就不再贅述了。

以上是解析 jQuery Ajax操作(二)之 資料傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!