jquery ajax 局部刷新小案例

下面是一个使用jQuery AJAX进行局部刷新的简单示例。这个示例假设你有一个HTML页面，其中包含一个按钮和一个用于显示数据的`

`元素。当用户点击按钮时，AJAX请求会发送到服务器（这里我们使用一个静态的JSON数据作为示例，实际使用时应该替换为服务器端的URL），然后`

`元素的内容会被更新为从服务器返回的数据。

HTML部分:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX 局部刷新示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button id="loadData">加载数据</button>
<div id="dataContainer">这里将显示加载的数据...</div>

<script>
$(document).ready(function(){
    $("#loadData").click(function(){
        // 假设的服务器URL，实际使用时替换为真实的URL
        var url = "https://api.example.com/data"; // 注意：这里是一个示例URL，实际使用时请替换

        // 使用jQuery AJAX发送GET请求
        $.ajax({
            url: url, // 请求的URL
            type: "GET", // 请求方法
            dataType: "json", // 预期服务器返回的数据类型
            success: function(data) {
                // 请求成功时执行的回调函数
                // 假设服务器返回的数据格式是 { message: "Hello, AJAX!" }
                $("#dataContainer").html(data.message); // 更新<div>元素的内容
            },
            error: function(xhr, status, error) {
                // 请求失败时执行的回调函数
                $("#dataContainer").html("加载数据失败: " + error);
            }
        });
    });
});
</script>

</body>
</html>

请注意，由于这是一个示例，我使用了一个假设的URL `"https://api.example.com/data"`。在实际应用中，你应该替换为真实的服务器URL，并确保服务器能够返回JSON格式的数据。

此外，由于AJAX请求是异步的，用户界面的更新（在这个例子中是`

`的内容更新）不会阻塞页面的其他部分。这就是所谓的“局部刷新”，它允许你在不重新加载整个页面的情况下更新页面的部分内容。