jQuery Ajax 返回 html 和 json 数据

Ajax

使用jQuery的Ajax功能，我们可以通过发送HTTP请求来获取服务器返回的HTML或JSON数据。这种技术非常有用，因为我们可以在不刷新整个页面的情况下异步地更新页面的一部分内容。

使用Ajax获取HTML数据

我们首先来看一个例子，演示如何使用Ajax获取服务器返回的HTML数据并将其插入到页面中的某个元素中。

HTML代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Ajax获取HTML数据示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
    <script>
        $(document).ready(function(){
            $("#load-html").click(function(){
                $.Ajax({
                    url: "example.html",
                    success: function(data){
                        $("#result").html(data);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>Ajax获取HTML数据示例</h1>
    <button id="load-html">加载HTML</button>
    <div id="result"></div>
</body>
</html>

在这个例子中，我们使用了jQuery的Ajax函数来发送一个GET请求，请求的URL是"example.html"。当服务器返回响应时，我们使用success回调函数来处理返回的HTML数据。在这个例子中，我们将返回的HTML数据插入到id为"result"的元素中。

使用Ajax获取JSON数据

除了获取HTML数据，我们还可以使用Ajax获取服务器返回的JSON数据。这种方式在与服务器进行数据交换时非常常见。

HTML代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Ajax获取JSON数据示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
    <script>
        $(document).ready(function(){
            $("#load-JSon").click(function(){
                $.Ajax({
                    url: "example.JSon",
                    dataType: "JSon",
                    success: function(data){
                        var html = "";
                        $.each(data, function(index, item){
                            html += "
" + item.name + ": " + item.age + "岁
";
                        });
                        $("#result").html(html);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>Ajax获取JSON数据示例</h1>
    <button id="load-JSon">加载JSON</button>
    <div id="result"></div>
</body>
</html>

在这个例子中，我们同样使用了Ajax函数来发送GET请求，请求的URL是"example.JSon"。我们还通过设置dataType为"JSon"告诉服务器我们期望返回的是JSON数据。当服务器返回响应时，我们使用success回调函数来处理返回的JSON数据。在这个例子中，我们将返回的每个对象的姓名和年龄拼接成一个HTML字符串，并插入到id为"result"的元素中。

通过jQuery的Ajax功能，我们可以轻松地获取服务器返回的HTML或JSON数据，并将其动态地插入到页面中，而无需刷新整个页面。这为我们实现异步更新页面内容提供了很大的便利。无论是获取HTML数据还是获取JSON数据，都可以通过简单的Ajax请求来实现。