您好,欢迎来到源码搜藏网!分享精神,快乐你我!
[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签
  • 特码历史记录
  • 在线工具
  • jquery手册
  • 2018六开彩开奖结果:在网站开发中使用jQuery加载数据的4种方法

    时间:2019-03-04 22:04 来源:互联网 作者:源码搜藏 浏览: 次 收藏 挑错 推荐 打印

    本文解释了jQuery Load方法在我们的Web项目中执行AJAX调用的有用性。 我将解释您可以使用此方法的四种方式/情况,并为用户创建令人惊讶的强大功能。 在 jQuery的负载 是可用于制造所有类型的简单和多用途功能 的AJAX 调用。 在Web应用程序中,有时您需要应用 本文解释了jQuery Load方法在我们的Web项目中执行AJAX调用的有用性。我将解释您可以使用此方法的四种方式/情况,并为用户创建令人惊讶的强大功能。

    特码历史记录 www.lm47u.com jQuery的负载是可用于制造所有类型的简单和多用途功能的AJAX调用。在Web应用程序中,有时您需要应用AJAX调用,从数据库获取数据或通过其他文件(text,html,xml,json等)。在这里,jQuery Load方法被证明是非常方便的。

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

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

    在网站开发中使用jQuery加载数据的4种方法

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

    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>

    说明 - 在上面的网页中,我Michael James在一个div(其中包含id“ labour”)中显示了一个劳动(名为“ ”)的信息。我正在调用jQuery Load方法来读取“ Michael-James.txt ”文件。此文本文件包含有关人工的信息。

    jQuery Load方法在保存网页的同一文件夹中搜索此文本文件。如果文件的路径不同,那么您当然可以更改代码中的路径。

    示例 - 如果文本文件保存在文件夹“ labourFolder ”中(后者保留在根目录中),则jQuery Load语法将如下所示:

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

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

    在网站开发中使用jQuery加载数据的4种方法

    在电子商务领域,分布式应用程序相互通信以获得更新的产品价格和信息。例如 - 一个大型分销商将产品的当前价格存储在JSON文件中。

    此文件的大小非常小,并会发送给小店铺管理员和合作伙伴的电子邮件地址。使用此JSON文件,他们可以了解分销商产品的当前价格。

    为店主工作的Web开发人员的工作是使用jQueryLoad 方法获取此JSON,并显示网页内的内容。

    这使得店主可以很容易地找出产品的当前价格。(请注意,对于普通人来说,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,并在显示的形式,在网页上。

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

     - 代替JSON,有时也使用XML。上面的jQuery Load代码也适用于XML文件,几乎没有修改。

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

    在网站开发中使用jQuery加载数据的4种方法

    应该有适当的安全性应用于网站,jQuery Load在这方面工作得很好。例如,使用jQueryLoad,您可以对用户进行身份验证,并仅向经过身份验证的用户提供安全信息。

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

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

    这就是我们如何为这种情况制作代码。

    代码

    <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);
        });
    });

    解释 - 我将输入的contorls值 传递给名为“ result.aspx ”的服务器端页面  ,然后#dbInformation通过jQuery Load方法加载此服务器端页面 - 名为“ ” 的控件的值(“ 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页面divID为“ dbInformation”。在此之后div,我将验证用户之后放置安全信息。您可能还注意到,此信息由位于登录页面中的jQuery 方法加载。divLoad

    这不是一个非常简单和高度安全的系统的蓝图吗?在评论部分告诉我你的想法。

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

    在网站开发中使用jQuery加载数据的4种方法

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

    jQueryLoad方法中,传递要获取HTML 的URL,然后发送到服务器端页面(如.aspx.php)。

    在服务器端页面中,您获取URL的HTML并设置在div,像我之前所做的那样。最后,我将展示这些div内容。

    在这里,我将在具有2 checkboxes 的网页中显示此功能(对于Tom Cruise和Angelina Jolie)。

    在检查any时checkbox,jQuery Load方法从Wikipedia页面获取它们的信息。

    代码

    <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, check the code of the server page below:

    代码

    <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上分享,以便您的朋友了解它。如果您有任何想法,请使用下面的评论部分与我沟通。

    在网站开发中使用jQuery加载数据的4种方法转载//www.lm47u.com/jiaocheng/ajax/39598.html
    413| 778| 767| 146| 942| 637| 722| 780| 264| 42|