jQuery AJAX GET - JavaScript

简介

在网页开发中，Ajax（Asynchronous JavaScript and XML）是一种使用 JavaScript 和 XML（或 JSON）在不重新加载整个网页的情况下更新部分页面的技术。jQuery 是一款流行的 JavaScript 库，它简化了使用 Ajax 的过程。

使用 jQuery 发送 GET 请求

在 jQuery 中，使用 $.get() 方法发送 GET 请求。它具有以下格式：

$.get(url, data, success, dataType)

• url：要发送请求的 URL。
• data：要发送的数据（可选）。
• success：成功回调函数，当请求成功时调用。
• dataType：服务器响应的数据类型（可选），默认为智能猜测。

接下来是一个简单的例子：

$.get("example.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

在这个例子中，我们向 "example.php" 发送一个 GET 请求，并在请求成功后显示服务器的响应和状态。

获取数据

获取从服务器返回的数据的最简单方法是在 success 回调中使用参数 'data'。例如：

$.get("example.php", function(data, status){
    $('#result').html(data);
});

在这个例子中，我们向 "example.php" 发送一个 GET 请求，并在请求成功后将返回的数据显示在 id 为 'result' 的 HTML 元素中。

发送数据

如果您需要向服务器发送数据，可以使用第二个参数 'data'。data 可以是数组、对象或查询字符串。例如：

$.get("example.php", { name: "John", age: 30 }, function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

在这个例子中，我们向 "example.php" 发送一个 GET 请求，并发送一个包含 'name' 和 'age' 属性的对象。

指定数据类型

服务器可以使用不同的数据格式（如 HTML、JSON 或 XML）响应 GET 请求。您可以通过指定 'dataType' 参数来告知 jQuery 服务器响应的数据类型。例如：

$.get("example.php", { name: "John", age: 30 }, function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
}, "json");

在这个例子中，我们向 "example.php" 发送一个 GET 请求，并告知 jQuery 服务器会响应 JSON 格式的数据。

完整例子

$(document).ready(function(){
    $("button").click(function(){
        $.get("example.php", function(data, status){
            $('#result').html(data);
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});

在这个例子中，当用户点击按钮时，将向 "example.php" 发送一个 GET 请求，并在请求成功后将返回的数据显示在 id 为 'result' 的 HTML 元素中，并在弹出窗口中显示数据和状态。

参考资料

• jQuery AJAX Methods
• jQuery.get()
• jQuery AJAX