jQuery Ajax GET 和 POST 請求
在本教程中，你將學習如何使用 jQuery 通過 HTTP GET 或 POST 方法通過 Ajax 從 Web 伺服器傳送和接收資料。
jQuery $.get() 和 $.post() 方法
jQuery $.get() 和 $.post() 方法提供了從 Web 伺服器非同步傳送和檢索資料的簡單工具。這兩種方法幾乎完全相同，除了一個主要區別 - $.get() 使用 HTTP GET 方法生成Ajax 請求，而 $.post() 使用 HTTP POST 方法生成 Ajax 請求。
這些方法的基本語法如下：
$.get(URL, data, success); —Or— $.post(URL, data, success);
上述語法中的引數具有以下含義：
- 必需的 URL 引數指定傳送請求的 URL。
- 可選的 data 引數指定一組查詢字串（即鍵/值對），它與請求一起傳送到 Web 伺服器。
- 可選的 success 引數基本上是一個回撥函式，如果請求成功則執行該函式。它通常用於檢索返回的資料。
注意： HTTP GET 和 POST 方法用於將請求從瀏覽器傳送到伺服器。這些方法之間的主要區別在於資料傳遞到伺服器的方式。檢視有關 GET 和 POST 方法的教程，瞭解這兩種方法的詳細說明和比較。
使用 jQuery 使用 AJAX 執行 GET 請求
以下示例使用 jQuery $.get() 方法使用 HTTP GET 方法向 date-time.php 檔案發出 Ajax 請求。它只是檢索從伺服器返回的日期和時間，並在瀏覽器中顯示它而不重新整理頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.get("date-time.php", function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<div id="result">
<h2>Content of the result DIV box will be replaced by the server date and time</h2>
</div>
<button type="button">Load Date and Time</button>
</body>
</html>
這是我們的 date-time.php 檔案，它只輸出伺服器的當前日期和時間。
<?php
// Return current date and time from the server
echo date("F d, Y h:i:s A");
?>
提示： 如果你在 PC 上本地執行這些示例時遇到任何困難，請檢視解決方案的 jQuery Ajax 載入教程。
你還可以使用請求將一些資料傳送到伺服器。在以下示例中，jQuery 程式碼向 create-table.php 發出 Ajax 請求，並將一些其他資料與請求一起傳送到伺服器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
// Get value from input element on the page
var numValue = $("#num").val();
// Send the input data to the server using get
$.get("create-table.php", {number: numValue} , function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<label>Enter a Number: <input type="text" id="num"></label>
<button type="button">Show Multiplication Table</button>
<div id="result"></div>
</body>
</html>
這是我們的 create-table.php 檔案的 PHP 指令碼，它只輸出使用者在按鈕點選時輸入的數字的乘法表。
<?php
$number = htmlspecialchars($_GET["number"]);
if(is_numeric($number) && $number > 0){
echo "<table>";
for($i=0; $i<11; $i++){
echo "<tr>";
echo "<td>$number x $i</td>";
echo "<td>=</td>";
echo "<td>" . $number * $i . "</td>";
echo "</tr>";
}
echo "</table>";
}
?>
使用 jQuery 使用 AJAX 執行 POST 請求
POST 請求與 jQuery 中的 GET 請求相同。因此，通常你應該使用哪種方法， $.get() 或者 $.post() 基本上取決於伺服器端程式碼的要求。如果要傳輸大量資料（例如表單資料），則需要使用 POST，因為 GET 對資料傳輸有嚴格的限制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery post() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(event){
// Stop form from submitting normally
event.preventDefault();
/* Serialize the submitted form control values to be sent to the web server with the request */
var formValues = $(this).serialize();
// Send the form data using post
$.post("display-comment.php", formValues, function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<form>
<label>Name: <input type="text" name="name"></label>
<label>Comment: <textarea cols="50" name="comment"></textarea></label>
<input type="submit" value="Send">
</form>
<div id="result"></div>
</body>
</html>
這是我們的 display-comment.php 檔案，它只輸出使用者輸入的資料。
<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Hi, $name. Your comment has been received successfully." . "<br>";
echo "Here's the comment what you've entered: $comment";
?>
現在你已經學習瞭如何使用 jQuery 非同步執行各種 Ajax 操作，例如載入資料，提交表單等。在結束本章之前，請檢視另一個經典的 Ajax 示例 ，它將向你展示如何根據使用 jQuery 在 country 下拉選單中選擇的選項填充州或城市下拉選單。