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 请求。
这些方法的基本语法可以通过以下方式给出：
上述语法中的参数含义如下：
- 必需的 URL 参数指定将请求发送到的 URL。
- 可选的 data 参数指定一组与请求一起发送到 Web 服务器的查询字符串（即键/值对）。
- 可选的 success 参数基本上是一个回调函数，如果请求成功则执行。 它通常用于检索返回的数据。
注意： HTTP GET 和 POST 方法用于将请求从浏览器发送到服务器。 这些方法之间的主要区别在于将数据传递到服务器的方式。 查看GET 和 POST 方法的教程，了解这两种方法的详细解释和比较。
使用 jQuery 使用 AJAX 执行 GET 请求
以下示例使用 jQuery $.get() 方法使用 HTTP GET 方法向"date-time.asp"文件发出 Ajax 请求。 它只是检索从服务器返回的日期和时间，并将其显示在浏览器中，而无需刷新页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("date-time.asp", 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.asp"文件，它简单地输出服务器的当前日期和时间。
示例
Download<?php
// 从服务器返回当前日期和时间
echo date("F d, Y h:i:s A");
?>提示：如果您在 PC 上本地运行这些示例时遇到任何困难，请查看 jQuery Ajax 加载 上的教程以获取解决方案。
您还可以通过请求向服务器发送一些数据。 在以下示例中，jQuery 代码向"create-table.asp"发出 Ajax 请求，并随请求向服务器发送一些附加数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// 从页面上的输入元素获取值
var numValue = $("#num").val();
// 使用 get 将输入数据发送到服务器
$.get("create-table.asp", {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.asp"文件的 PHP 脚本，它简单地输出用户单击按钮时输入的数字的乘法表。
示例
Download<?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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
// 阻止表单正常提交
event.preventDefault();
/* 序列化提交的表单控件值，以随请求发送到 Web 服务器 */
var formValues = $(this).serialize();
// 使用 post 发送表单数据
$.post("display-comment.asp", formValues, function(data){
// 在浏览器中显示返回的数据
$("#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.asp"文件，它简单地输出用户输入的数据。
示例
Download<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Hi, $name. Your comment has been received successfully." . "
";
echo "Here's the comment what you've entered: $comment";
?>现在您已经了解了如何使用 jQuery 异步执行各种 Ajax 操作，例如加载数据、提交表单等。 在结束本章之前，请查看另外一个 Ajax 的经典示例，它将向您展示如何使用 jQuery 根据在地区下拉列表中选择的选项来填充州或城市下拉列表。