jQuery_05Ajax_杂项

作者: tzktzk1 | 来源:发表于2023-11-17 00:13 被阅读0次

jQuery - AJAX简介

AJAX允许通过与后台的Web服务器交换数据来“异步”更新网页。
这意味着可以更新网页的某些部分，而无需重新加载整个页面。

使用AJAX，我们可以：

    将数据发送到Web服务器（在后台）
    从Web服务器读取数据（页面加载后）
    更新网页而无需重新加载页面

什么是AJAX？

    AJAX代表异步JavaScript和XML。
    AJAX不是一种编程语言，它是一种用于从网页访问Web服务器的技术。
    AJAX允许您在不重新加载页面的情况下向服务器发出请求。
    AJAX可以与服务器通信，交换数据和更新页面，而无需刷新页面。
    AJAX可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。
    简而言之，就是使用XMLHttpRequest对象与服务器进行通信。
    AJAX的两个主要功能使您可以执行以下操作：
        向服务器发出请求，而无需重新加载页面
        从服务器接收和处理数据

jQuery的Ajax

    不同的浏览器对Ajax的实现方式不同，这意味着如果您采用典型的JavaScript方式来实现Ajax，则必须为不同的浏览器编写不同的代码，以确保Ajax可以跨浏览器工作。
    但是，幸运的是，jQuery通过照顾那些浏览器的差异，简化了实现Ajax的过程。
    jQuery提供了简单的方法来实现可在所有浏览器之间无缝运行的Ajax。
    在下一章中，我们将介绍最重要的jQuery AJAX方法。

jQuery - AJAX load()方法

jQuery load()方法是一种简单但功能强大的AJAX方法。

jQuery load()方法

    jQuery load()方法从服务器加载数据，并将返回的HTML放入所选元素中。
    此方法提供了一种从Web服务器异步加载数据的简单方法。
    这是load()方法的语法：
        $(selector).load(URL, data, callback)
    参数：
        URL-指定您要请求的URL
        data -（可选）指定与请求一起发送到服务器的纯对象或字符串
        callback-（可选）指定在load()方法完成后执行的回调函数
    以下示例将ajax_intro.txt文件的内容加载到DIV元素中：
    示例
        $("button").click(function(){
          $("div").load("ajax_intro.txt");
        });

    以下示例加载ajax_post.html页面，并发送一些其他数据：
    示例
        $("button").click(function(){
          let data = {fname:"Seagull", lname:"Anna"};
          $("div").load("ajax_post.php", data);
        });

    这是PHP文件的外观（“ ajax_post.html”）：
    <?php
        echo "<p>Hello ".$_POST['fname']." ".$_POST['lname'].", How are u doing?</p>";
    ?>
    请求方法：如果将数据作为对象提供，则使用POST方法。否则，假定为GET。

使用回调加载页面

    可选的callback参数指定load()方法完成后要运行的回调函数。
    回调函数可以具有不同的参数：
        response  -包含请求中的结果数据
        status -包含请求的状态（"success", "notmodified", "error", "timeout", 或 "parsererror"）
        xhr-包含XMLHttpRequest对象
    以下示例将加载ajax_post.html页面，并发送一些其他数据和警报状态消息：
    示例
    <!DOCTYPE html>
    <html>
        <title>jQuery - AJAX load() post方法示例 - 基础教程(nhooo.com)</title>
        <head>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("button").click(function(){
                    let data = {fname:"Seagull", lname:"Anna"};
                    $("div").load("ajax_post.php", data, function(response, status){
                      alert(status);
                    });
                  });
                });
            </script>
        </head>
        <body>
            <h2>jQuery load() 方法</h2>
            <button>获取内容（使用HTTP POST方法）</button>
            <div></div>
        </body>
    </html>

    以下示例在Ajax请求遇到错误时显示通知：
    示例
        $("button").click(function(){
          let data = {fname:"Seagull", lname:"Anna"};
          $("#success").load("wrong_file.php", data, function(response, status, xhr){
            if(status == "error"){
              let msg = "Sorry but there was an error: ";
              $("#error").html(msg + xhr.status + " " + xhr.statusText);
            }
          });
        });

加载页面片段

    jQuery load()方法还允许我们仅获取文档的一部分。
    这可以通过在url参数后面附加一个空格和jQuery选择器来简单地实现。
    以下示例将文件“ ajax_load.html”中ID为“ table”的元素的内容加载到DIV元素中：
    示例
        $("button").click(function(){
          $("div").load("ajax_load.html #table");
        });

jQuery - AJAX get()和post()方法

jQuery $.get()和$ .post()方法用于通过HTTP GET和POST请求从服务器请求数据。

HTTP请求：GET与POST

    在GET方法中，浏览器会将名称/值对添加到URL的末尾。
    GET通常用于不关心安全性的地方。
        GET请求可以被缓存
        GET请求保留在浏览器历史记录中
        GET请求可以加书签
        处理敏感数据时，绝不应使用GET请求
        GET请求具有长度限制（仅2048个字符）
    在POST方法中，内容不会显示在URL中。
    如果表单数据包含敏感信息或个人信息，则应始终使用POST。
        POST请求永远不会被缓存
        POST请求不会保留在浏览器历史记录中
        POST请求无法添加书签
        处理敏感数据时应使用POST请求
        POST请求对数据长度没有限制

jQuery $ .get()方法

    jQuery $.get()方法使用HTTP GET请求从服务器加载数据。
    这是$.get()method 的语法：
        $.get(URL, data, callback)
    参数：
        URL-指定您要请求的URL
        data -（可选）指定与请求一起发送到服务器的纯对象或字符串
        callback-（可选）指定在请求成功时执行的回调函数
    此示例请求ajax_get.php页面，发送一些其他数据，并发出警报状态消息：
    示例
        $("button").click(function(){
          $.get("ajax_get.php", {fname:"Seagull", lname:"Anna"}, function(data, status){
            $("#output").html(data);
            alert(status);
          });
        });

    这是PHP文件的源码（“ ajax_get.php”）：
    <?php
        echo "<p>Hello ".$_GET['fname']." ".$_GET['lname'].", How are u doing?</p>";
    ?>

jQuery $ .post()方法

    jQuery $.post()方法使用HTTP POST请求从服务器加载数据。
    这是$.post()method 的语法：
        $.post(URL, data, callback)
    参数：
        URL-指定您要请求的URL
        data -（可选）指定与请求一起发送到服务器的纯对象或字符串
        callback-（可选）指定在请求成功时执行的回调函数
    此示例请求ajax_post.php页面，发送一些其他数据，并发出警报状态消息：
    示例
        $("button").click(function(){
          $.post("ajax_post.php", {fname:"Seagull", lname:"Anna"}, function(data, status){
            $("#output").html(data);
            alert(status);
          });
        });

    这是PHP文件的源码（“ ajax_post.php”）：
    <?php
        echo "<p>Hello ".$_POST['fname']." ".$_POST['lname'].", How are u doing?</p>";
    ?>

jQuery Ajax事件

Ajax请求会产生许多您可以订阅的不同事件。

Ajax事件的类型

    有两种类型的Ajax事件：
        本地事件
        全局事件

Ajax本地事件

    Ajax本地事件是可以在Ajax请求对象中订阅的回调。
    您可以像这样监听ajax本地事件：
    示例
    <!DOCTYPE html>
    <html>
        <title>jQuery Ajax 本地事件示例 - 基础教程(nhooo.com)</title>
        <head>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("button").click(function(){
                    $.ajax({
                      url: "ajax_intro.txt",
                      beforeSend: function(){
                        $("p").append("触发beforeSend事件<br>");
                      },
                      error: function(xhr){
                        $("p").append("发生错误: " + xhr.status + " " + xhr.statusText + "<br>");
                      },      
                      success: function(response){
                        $("p").append(response);
                      },
                      complete: function(){
                        $("p").append("触发complete事件<br>");
                      }
                    });
                  });
                });
            </script>
        </head>
        <body>
            <h2>jQuery Ajax 本地事件</h2>
            <button>加载"ajax_intro.txt"</button>
            <p></p>
        </body>
    </html>

    有四个Ajax本地事件：
        beforeSend-在发送请求之前运行的功能
        error -如果请求失败，则运行的函数
        success -请求成功时要运行的功能
        complete-完成请求后运行的功能（成功和错误功能之后）

Ajax全局事件

    Ajax全局事件在文档上触发，调用任何正在侦听的处理程序。
    您可以像这样监听ajax全局事件：
    示例
    <!DOCTYPE html>
    <html>
        <title>jQuery Ajax 全局事件示例 - 基础教程(nhooo.com)</title>
        <head>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("button").click(function(){
                    $("#result").load("ajax_intro.txt");
                  });
                  $(document).ajaxComplete(function(event, xhr, options){
                    $("#done").append(options.url + "<br>");
                    $("#done").append(xhr.status + "<br>");
                    $("#done").append(event.type);
                  });
                });
            </script>
        </head>
        <body>
            <h2>jQuery Ajax 全局事件</h2>
            <button>加载"ajax_intro.txt"</button>
            <p id="result"></p>
            <p id="done"></p>
        </body>
    </html>

    有六个Ajax全局事件：
        ajaxComplete() -在Ajax请求完成时附加要调用的函数
        ajaxError() -当Ajax请求完成并附有错误时，附加要调用的函数
        ajaxSend() -在发送Ajax请求之前附加要调用的函数
        ajaxStart() -附加第一个Ajax请求开始时要调用的函数
        ajaxStop() -完成所有Ajax请求后，附加一个要调用的函数
        ajaxSuccess() -每当Ajax请求成功完成时，附加要调用的函数

jQuery 杂项

jQuery $ .noConflict()方法

如您所知，jQuery使用美元符号（$）作为的快捷方式或别名jQuery。
$就像jQuery一样，许多JavaScript库都将其用作函数或变量名。
如果两个不同的库使用同一快捷方式，则其中一个可能会停止工作。
幸运的是，jQuery提供了一种特殊的$.noConflict()方法来处理这种情况。

jQuery $ .noConflict()方法

    jQuery $.noConflict()方法释放jQuery对$变量的指定，以便其他脚本可以使用它。
    当然，您仍然可以使用jQuery，只需编写全名而不是快捷方式即可：
    示例
        $.noConflict();
        jQuery(document).ready(function(){
          jQuery("button").click(function(){
            jQuery("p").text("jQuery完美运行!!!");
          });
        });

    此方法还可用于为jQuery变量指定新的自定义名称。
    以下示例创建了一个别名，而不是在其余脚本中使用的jQuery：
    示例
        let jq = $.noConflict();
        jq(document).ready(function(){
          jq("button").click(function(){
            jq("p").slideToggle();
          });
        });

jQuery filter()方法

jQuery可用于过滤/搜索一组元素中的特定元素。

jQuery filter()方法

    jQuery filter()方法返回与特定条件匹配的元素。
    此方法过滤掉所有不符合所选条件的元素，并且将返回那些匹配项。

筛选表

    以下示例对表中的项目执行不区分大小写的搜索：
    <!DOCTYPE html>
    <html>
        <title>jQuery filter()筛选搜索项目列表示例 - 基础教程(nhooo.com)</title>
        <head>
            <style>
                input {
                  display: block;
                  padding: 4px;
                  font-size: 16px;
                }
                table {
                  border-collapse: collapse;
                  width: 100%;
                  table-layout: fixed;
                }
                td, th {
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                }
                tbody tr:nth-child(odd) {
                  background-color: #F1F1F1;
                }
            </style>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("#myInput").keyup(function() {
                    let value = $(this).val().toLowerCase();
                    $("#myTable tr").filter(function() {
                      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                    });
                  });
                });
            </script>
        </head>
        <body>
            <p>在输入字段中键入一些内容，以在表格中搜索姓名，城市或电话：</p>
            <input id="myInput" type="text" placeholder="Search.."><br>
            <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>City</th>
                <th>Phone</th>
              </tr>
            </thead>
            <tbody id="myTable">
              <tr>
                <td>Seagull</td>
                <td>Delhi</td>
                <td>999945850</td>
              </tr>
              <tr>
                <td>Espy</td>
                <td>Mizoram</td>
                <td>8425896528</td>
              </tr>
              <tr>
                <td>Mudit</td>
                <td>Jaipur</td>
                <td>9858621233</td>
              </tr>
              <tr>
                <td>Ankit</td>
                <td>Mumbai</td>
                <td>9560478555</td>
              </tr>
              <tr>
                <td>Nancy</td>
                <td>Delhi</td>
                <td>9210154545</td>
              </tr>
            </tbody>
            </table>
        </body>
    </html>

    示例说明：
        filter()方法检查是否有任何文本值与输入字段的值匹配
        toggle()方法隐藏与搜索不匹配的行
        toLowerCase()将文本转换为小写的方法，这使搜索大小写不敏感

筛选清单

    以下示例对列表中的项目执行不区分大小写的搜索：
    <!DOCTYPE html>
    <html>
        <title>jQuery filter()筛选示例 - 基础教程(nhooo.com)</title>
        <head>
            <style>
                input {
                  display: block;
                  padding: 4px;
                  font-size: 16px;
                }
            </style>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("#myInput").keyup(function() {
                    let value = $(this).val().toLowerCase();
                    $("#myList li").filter(function() {
                      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                    });
                  });
                });
            </script>
        </head>
        <body>
            <p>在输入字段中键入一些内容以搜索列表项：</p>
            <input id="myInput" type="text" placeholder="Search..">
            <ul id="myList">
                 <li>伦敦</li>
                 <li>德里</li>
                 <li>北京</li>
                 <li>孟买</li>
                 <li>班加罗尔</li>
            </ul>
        </body>
    </html>

jQuery_05Ajax_杂项

jQuery - AJAX简介

使用AJAX，我们可以：

什么是AJAX？

jQuery的Ajax

jQuery - AJAX load()方法

jQuery load()方法

使用回调加载页面

加载页面片段

jQuery - AJAX get()和post()方法

HTTP请求：GET与POST

jQuery $ .get()方法

jQuery $ .post()方法

jQuery Ajax事件

Ajax事件的类型

Ajax本地事件

Ajax全局事件

jQuery 杂项

jQuery $ .noConflict()方法

jQuery $ .noConflict()方法

jQuery filter()方法

jQuery filter()方法

筛选表

筛选清单

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读