jquery的ajax的資料傳遞詳解

請求資料

我們可以使用 GET、POST 兩種方式向後端請求資料，這裡以 PHP 為例，假設有測試頁面 age.php，用於返回年齡資訊。

程式碼如下:

[PHP] 純文字檢視 複製程式碼
if(isset($_REQUEST['name']) && $_REQUEST['name']=='stephen'){  
  echo '23';
}

頁面的程式碼內容為:

[HTML] 純文字檢視 複製程式碼
<div>
 <a href="age.php">stephen</a>
 <span>age : </span>
 <span id="sex"></span>
</div>

希望點選a標籤後，在不重新整理頁面的前提下獲取年齡資訊。首先用GET方式請求資料:

GET方式

[JavaScript] 純文字檢視 複製程式碼
$('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方式

[JavaScript] 純文字檢視 複製程式碼
$('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方法簡化程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('a').click(function(e){
  e.preventDefault();
  var url=$(this).attr('href'),
  name=$(this).text(),
  requestData={'name':name};
  $('#sex').load(url, requestData);
});

傳送資料

除了可以使用Ajax技術從後端獲取資料，還可以向後端傳送資料，常見的就是非同步提交表單的情景

下面以使用者驗證為例:

[HTML] 純文字檢視 複製程式碼
<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>

假設當使用者名稱為 stephenlee，密碼為123456時驗證通過，否則失敗。

測試頁面validate.php為:

[PHP] 純文字檢視 複製程式碼
if($_REQUEST['username']=='stephenlee' && $_REQUEST['password']=='123456'){
  echo 'pass';
} 
else{
  echo 'fail';
}

使用get方式傳送資料到後端驗證:

[JavaScript] 純文字檢視 複製程式碼
$('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 後，結果為: