jQuery - AJAX load() 实例用法详解

简介

在jQuery中，我们可以使用load()函数进行异步加载数据和HTML内容。通过load()函数，我们可以将一个URL地址的HTML内容加载到指定的页面元素中。在这个实例中，我们将介绍load()函数的用法并且包含两个示例说明。

load() 的语法

load()函数的基本语法如下所示：

$(selector).load(url,[data],[callback]);

其中：
- selector：必须指定目标元素。
- url：必须指定载入url地址。
- data：可选参数，传递到服务器的数据。
- callback：可选参数，请求完成后所执行的回调函数。

示例用法

1. 加载HTML内容到页面元素中

下例展示了如何使用load()函数将一个HTML文件加载到指定的页面元素中：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery load() 实例 #1</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn-load-html").click(function(){
                $("#html-container").load("content.html");
            });
        });
    </script>
</head>
<body>
    <h1>jQuery load() 实例 #1</h1>
    <button id="btn-load-html">加载HTML内容</button>
    <div id="html-container"></div>
</body>
</html>

通过上述代码，当用户点击“加载HTML内容”按钮时，将会触发load()函数并从content.html中载入HTML内容到html-container元素中。

2. 加载服务器端数据到页面元素中

下例展示了如何使用load()函数将数据从服务器端异步加载到指定的页面元素中：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery load() 实例 #2</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn-load-data").click(function(){
                $.get("data.txt", function(data){
                    $("#data-container").html(data);
                });
            });
        });
    </script>
</head>
<body>
    <h1>jQuery load() 实例 #2</h1>
    <button id="btn-load-data">加载服务器端数据</button>
    <div id="data-container"></div>
</body>
</html>

通过上述代码，当用户点击“加载服务器端数据”按钮时，将会触发get()函数并从data.txt文件中异步载入数据并将结果显示在data-container元素中。

结论

在以上两个示例中，我们已经看到了load()函数的强大功能，它可以用来异步加载HTML内容和从服务器端加载数据。但是，我们还需要注意到，load()函数会覆盖页面元素中原有的内容，因此需要小心使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery – AJAX load() 实例用法详解 - Python技术站

jQuery – AJAX load() 实例用法详解

jQuery - AJAX load() 实例用法详解

简介

load() 的语法

示例用法

1. 加载HTML内容到页面元素中

2. 加载服务器端数据到页面元素中

结论

相关文章