• <code id="58gs9"></code>

      <mark id="58gs9"></mark>
      1. 您好欢迎来到源码搜藏网分享精神快乐你我
        [加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签
      2. 首 页
      3. 在线工具
      4. jquery手册
      5. 当前位置首页 > 开发教程 > ajax教程 >

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

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

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

        jQuery的负载是可用于制造所有类型的简单和多用途功能的AJAX调用在Web应用程序中有时您需要应用AJAX调用从数据库获取数据或通过其他文件texthtmlxmljson等在这里jQuery Load方法被证明是非常方便的

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

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

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

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

        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文件中

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

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

        这使得店主可以很容易地?#39029;?#20135;品的当前价格请注意对于普通人?#27492;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”单击?#24405;jQuery Load获取产品JSON文件一旦JSON是牵强它被解析到HTML并在显示的形式在网页上

        表格中的产品信息对于普通人?#27492;?#38750;常容易理解

         - 代替JSON有时也使用XML上面的jQuery Load代码也适用于XML文件?#36127;?#27809;?#34892;?#25913;

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

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

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

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

        这可以?#20048;?#26410;经身份验证的用户从数据库?#26790;?#26426;密信息

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

        代码

        <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.?#28216;?#22522;百?#39057;?#22806;部网站加载数据

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

        一些网站显示来自维基百?#39057;?/font>外部网站的信息可以使用jQuery Load方法轻松创建此功能

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

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

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

        在检查any时checkboxjQuery 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("");
        });

        在服务器端页面我将?#28216;?#22522;百科中获取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种方法转载
        下一篇?#22909;?#26377;了
        ֹ

      6. <code id="58gs9"></code>

          <mark id="58gs9"></mark>

          1. <code id="58gs9"></code>

              <mark id="58gs9"></mark>