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 下拉列表中选择的选项填充州或城市下拉列表。