• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • load()

    从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中。

    .load(url[,data][,complete])
    • url类型: String。一个包含发送请求的URL字符串
    • data类型: PlainObject, String。向服务器发送请求的Key/value参数,例如{name:"",age:23}
    • complete类型:Function(String responseText,String textStatus,jqXHR jqXHR)。当请求成功后执行的回调函数。

    注意:在jQuery 3.0 之前。事件处理函数中也有一个方法叫.load()。在 jQuery 老版本中,根据传递给它的参数设置来确定使用哪个方法执行。

    这个方法是从服务器获取数据最简单的方法。除了不是全局函数,这个方法和$.get(url, data, success)基本相同,它有一个隐含的回调函数。当他检查到一个成功的请求(i.e.当textStatus是"success"或者"notmodified")时,.load()方法将返回的HTML 内容数据设置到相匹配的节点中。这就意味着大多数采用这个方法可以很简单:

    $('#result').load('ajax/test.html');
    

    如果选择器没有匹配的元素——在这种情况下,如果document不包含id ="result"的元素-这个Ajax请求将不会被发送出去。

    如果提供回调,都将在执行后进行后处理:

    Callback Function

    如果提供了"complete"回调函数,它将在函数处理完之后,并且 HTML 已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次,并且this始终指向当前正在处理的 DOM 元素。

    $('#result').load('ajax/test.html', function() {
      alert('Load was performed.');
    });
    

    在上文的两个例子中,如果当前的文件不包含ID为“result”的元素,那么.load()方法将不被执行。

    Request Method(请求方法)

    默认使用 GET 方式,如果data参数提供一个对象,那么使用 POST 方式。

    Loading Page Fragments(加载页面片段)

    .load()方法,不像$.get()那样,允许我们使用在url中添加特定参数的特殊语法,来实现可以指定要插入哪一部分远程文档。如果url参数的字符串中包含一个或多个空格,那么第一个空格后面的内容,会被当成是 jQuery 的选择器,从而决定应该加载返回结果中的哪部分内容。注:第一个空格后面是一个jQuery选择器,返回的内容中匹配该选择器的内容将被载人到页面中。)

    我们可以修改上述例子中,只有#container的一部分被载人到文件中:

    $('#result').load('ajax/test.html #container');
    

    当这种方法执行,它将检索ajax/test.html返回的页面内容,jQuery会获取ID为container元素的内容,并且插入到ID为result元素,而其他未被检索到的元素将被废弃。

    jQuery使用浏览器的.innerHTML属性去解析检索到的文档,并将其插入到当前文档中。在此过程中,浏览器通常会过滤文档中的一些元素,比如<html>,<title>,或者<head>元素。其结果是,由.load()方法返回的元素与从浏览器中直接获取到的文档内容,可能是并不完全一样的。

    Script Execution(脚本执行)

    当使用URL参数中没有后面跟选择器表达式时,那么传递给.html()的返回内容中,是含有脚本的。在它们被丢弃之前,脚本是会被执行的。但如果调用.load()时,即使在 url 参数中添加了选择器表达式,但在 DOM 被更新之前,脚本会被删除。因此脚本会被执行。下面的例子分别演示了这两种情况:

    任何加载到#a中的 JavaScript 脚本,将会作为文档的一部分而被执行。

    $('#a').load('article.html');
    

    然而,在以下情况下,脚本块将从被加载到#b的document中被剥离出来,而不执行:

    $('#b').load('article.html #target');
    

    Additional Notes:(其他注意事项:)

    • 由于浏览器的安全限制,大多数“Ajax”的要求,均采用同源的政策;该请求不能成功地检索来自不同的域,子域或协议的数据。

    例子

    在一个有序列表中,加载主页的页脚导航。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>load demo</title>
      <style>
      body {
        font-size: 12px;
        font-family: Arial;
      }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <b>Projects:</b>
    <ol id="new-projects"></ol>
     
    <script>
    $( "#new-projects" ).load( "/resources/load.html #projects li" );
    </script>
     
    </body>
    </html>
    

    显示一个信息如果Ajax请求遭遇一个错误

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      body{ font-size: 12px; font-family: Arial; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <b>Successful Response (should be blank):</b>
    <div id="success"></div>
    <b>Error Response:</b>
    <div id="error"></div>
     
    <script>
    $("#success").load("/not-here.php", function(response, status, xhr) {
      if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#error").html(msg + xhr.status + " " + xhr.statusText);
      }
    });
      </script>
     
    </body>
    </html>
    

    将feeds.html 文件载人到 ID为feeds的DIV.

    $("#feeds").load("feeds");
    

    Result:

    <div id="feeds"><b>45</b> feeds found.</div>
    

    发送数组形式的data参数到服务器。

    $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
    

    Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

    $("#feeds").load("feeds.php", {limit: 25}, function(){
    alert("The last 25 entries in the feed have been loaded");
    });
    

    上篇:jQuery.post()