在您的网站中使用 jQuery Load 的 4 种方法 - （下载代码）

• 演示
• 下载示例

引言

jQuery Load 是最简单且通用的函数，可用于进行所有类型的 AJAX 调用。在 Web 应用程序中，有时你需要应用 AJAX 调用，无论是从数据库还是通过其他文件（text, html, xml, json 等）获取数据。这时，jQuery Load 方法非常方便。

让我们讨论一些可以在 Web 应用程序中使用此方法的方式。

1. 读取小型工厂的文本文件数据

文本文件是存储信息的简单方式。例如，在小型工厂中，每个工人的信息都存储在单独的文本文件中。所有这些文本文件都上传到云服务器，以便公司管理员可以通过 Internet 访问它们。

在这里，Web 开发人员的工作是将在 Web 页面上显示工人的信息。为此，开发人员可以创建一个 Web 页面，添加一些 div 来显示此信息。然后，使用 jQuery load 方法向这些文本文件发出 jQuery Ajax 调用。

最后，将信息显示在这些 div 中。

代码

<script>
    $(document).ready(function () {
        $("#labour").load("Michael-James.txt", function (response, status, xhr) {
            if (status == "error")
                $("#textData").html
        });
    });
</script>

说明 - 在上面的网页中，我在一个 div（ID 为“labour”）中显示了一个工人（名为“Michael James”）的信息。我正在调用 jQuery Load 方法来读取“Michael-James.txt”文件。该文本文件包含有关工人的信息。

jQuery Load 方法在 Web 页面所在的同一文件夹中搜索此文本文件。如果文件的路径不同，则可以在代码中更改路径。

示例 - 如果文本文件保存在名为“labourFolder”的文件夹中（该文件夹又保存在根目录中），则 jQuery Load 语法将如下所示：

$("#labour").load("/labourFolder/Michael-James.txt", 
function (response, status, xhr) {
    if (status == "error")
        $("#textData").html
 });

2. 从 JSON 获取产品信息和价格

在电子商务领域，分布式应用程序之间会进行通信以获取最新的产品价格和信息。例如 - 一位大分销商将产品的当前价格存储在 JSON 文件中。

该文件体积小巧，会发送给小店主和合作伙伴的电子邮件地址。通过此 JSON 文件，他们可以了解分销商产品的当前价格。

为店主工作的 Web 开发人员的任务是使用 jQuery Load 方法获取此 JSON ，并将其显示在 Web 页面中。

这样，店主就更容易找出产品的当前价格。（请注意，JSON 格式对于普通人来说是难以理解的）。

代码

<button id="productButton">Try</button>
<div id="productJsonDiv"></div>
<div id="productHtmlDiv"></div>

$("#productJsonDiv").load
("product.json", function (response, status, xhr) {
    $(".displayPara").css("display", "block");
    var json = JSON.parse($("#productJsonDiv").html());
    var table = $("<table><tr><th>Product</th>
    <th>Color</th><th>Price</th></tr>");
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $("<tr>");
        tr.append("<td>" + json[i].Product + "</td>");
        tr.append("<td>" + json[i].color + "</td>");
        tr.append("<td>" + json[i].Price + "</td>");
        tr.append("</tr>");
        table.append(tr);
    }
    table.append("</table>");
    $("#productHtmlDiv").html(table);
    if (status == "error")
        $("#textNoData").html
        ("Error: " + xhr.status + ": " + xhr.statusText);
});

说明 - 在 ID 为“productButton”的按钮的点击事件中，jQuery Load 会获取产品 JSON 文件。一旦 JSON 被获取，它就会被解析成 HTML 并在 Web 页面上以表格形式显示。

表格形式的产品信息对于普通人来说非常容易理解。

注意 - 有时也会使用 XML 来代替 JSON。上述 jQuery Load 代码通过少量修改也可用于 XML 文件。

3. 从数据库读取安全信息

网站应具备适当的安全措施，jQuery Load 在这方面表现得非常好。例如，使用 jQuery Load ，你可以进行用户身份验证，并仅向经过身份验证的用户提供安全信息。

考虑一种情况 - 你有一个 Web 页面，其中有两个输入控件，一个用于输入用户名，另一个用于输入密码。现在，用户必须输入他的用户名和密码。系统会检查他的用户名和密码，只有当它们正确时，才会向他显示他的安全信息。

这可以防止未经身份验证的用户访问数据库中的秘密信息。

这是我们如何为这种情况编写代码。

代码

<input id="usernameInput" 
type="text" placeholder="username" />
<input id="passwordInput" 
type="text" placeholder="password" />
<button id="databaseButton">Try</button>
<div id="databaseDiv"></div>

$("#databaseButton").click(function (e) {
    $("#databaseDiv").load("result.aspx #dbInformation", 
    { 
      "username": "" + $("#usernameInput").val() + "", 
      "password": "" + $("#passwordInput").val() + "" 
    }, 
    function (response, status, xhr) {
      if (status == "error")
        $("#databaseDiv").html("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

说明 - 我正在将输入控件的值传递给一个名为“result.aspx” 的服务器端页面，然后通过 jQuery Load 方法加载该服务器端页面的、名为“#dbInformation”的控件的值（“dbInformation”是服务器页面中的一个 div）。

所有这些都只需一行代码即可完成。

现在，在服务器端页面“result.aspx”中，我将检查用户名和密码以验证用户。如果它们正确，我才会返回他的安全信息。

result.aspx 页面的代码如下：

代码

<div id="dbInformation" runat="server">
</div>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        SearchDatabase();
}
void SearchDatabase()
{
    string username = Request.Form["username"];
    string password = Request.Form["password"];
    if ((username == "admin") && 
    (password == "admin"))
        dbInformation.InnerHtml = "Hello admin,
        <br/>Your secured information is given below.............";
    else
        dbInformation.InnerHtml = "Wrong Username or Password. Try again !";
}

说明 - 这个.aspx 页面有一个 ID 为“dbInformation”的 div。在验证用户后，我将把安全信息放入此 div 中。你可能还会注意到，此 div 的信息是通过登录页面中的 jQuery Load 方法加载的。

这不就是一套非常简单且高度安全的系统蓝图吗？请在评论区告诉我你的想法。

4. 从维基百科等外部网站加载数据

有些网站会显示来自外部网站（如维基百科）的信息。使用 jQuery Load 方法可以轻松创建此功能。

在 jQuery Load 方法中，传递要获取其 HTML 的 URL ，然后将其发送到服务器端页面（如.aspx 或 .php）。

在服务器端页面中，你获取该 URL 的 HTML 并将其设置在 div 中，就像我之前做的那样。最后，我将显示该 div 的内容。

在这里，我将在包含 2 个 checkbox（用于汤姆·克鲁斯和安吉丽娜·朱莉）的网页中展示此功能。

勾选任何一个 checkbox 时，jQuery Load 方法都会从维基百科页面获取他们的信息。

代码

<input type="checkbox" 
id="tomCheckbox" /><label>Show 
"Tom Cruise Information"</label><br />
<input type="checkbox" id="ajCheckbox" />
<label>Show "Angelina Jolie Information"</label>
<div id="externalWebsiteDiv"></div>

$("input[type=checkbox]").change(function () {
    var checkedValue = $(this).prop("checked");
    $("input[type=checkbox]").prop("checked", false);
    $(this).prop("checked", checkedValue);

    if ($("#tomCheckbox").prop("checked") == true) {
        $("#externalWebsiteDiv").load("result.aspx #wikiInformation", 
        { "url": "https://en.wikipedia.org/wiki/Tom_Cruise" }, 
function (response, status, xhr) {
            if (status == "error")
                $("#externalWebsiteDiv").html
                ("Error: " + xhr.status + ": " + xhr.statusText);
        });
    }
    else if ($("#ajCheckbox").prop("checked") == true) {
        $("#externalWebsiteDiv").load("result.aspx #wikiInformation", 
        { "url": "https://en.wikipedia.org/wiki/Angelina_Jolie" }, 
        function (response, status, xhr) {
            if (status == "error")
                $("#externalWebsiteDiv").html("Error: " + 
                xhr.status + ": " + xhr.statusText);
        });
    }
    else
        $("#externalWebsiteDiv").html("");
});

在服务器端页面中，我将从维基百科获取 HTML 并将其设置在 div 中，请查看下面的服务器页面代码：

代码

<div id="wikiInformation" runat="server">
</div>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string url = Request.Form["url"];
        if (url != null)
            GetWikiData(url);
    }
}

void GetWikiData(string url)
{
    using (WebClient client = new WebClient())
    {
        string htmlCode = client.DownloadString(url);
        wikiInformation.InnerHtml = htmlCode;
    }
}

结论

阅读完本教程后，你可能对 jQuery Load 函数 在 Web 开发任务中的作用有了很好的了解。没有一项AJAX 任务是无法通过此函数完成的。

使用它在你的网站和 Web 应用程序中创建强大的 AJAX 功能。

希望你喜欢这篇教程。请在 Facebook 和 Twitter 上分享给你的朋友们。如果你有任何想法，请使用下面的评论区与我交流。

谢谢！