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