AJAX - $().load(url,data,function(response,status,xhr))

简介: AJAX - $().load(url,data,function(response,status,xhr))

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。


语法

load(url,data,function(response,status,xhr))

image.png

详细说明

该方法是最简单的从服务器获取数据的方法。

它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。


当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。

这意味着该方法的大多数使用会非常简单:

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

如果提供回调函数,则会在执行 post-processing 之后执行该函数:


$("#result").load("ajax/test.html", function() {

 alert("Load was performed.");

});

上面的两个例子中,如果当前文档不包含 "result" ID,则不会执行 .load() 方法。


如果提供的数据是对象,则使用 POST 方法;否则使用 GET 方法。

加载页面片段

.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。

这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

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

如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。

该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。

如下例子所示,返回响应信息中 标签 h2 a 中的内容

 <script >
    $(function(){
      $("a").click(function(){
        var url = this.href+" h2 a";//注意,h2前面有空格,这是url特殊语法
        var args = {"time":new Date()};
        $("#details").load(url,args,function(response,status){
          if(status == "success"){
            alert(response);
          }
        }
        );
        return false;
      });
    })
  </script>

以下为JSP页面:

<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.html">Andy</a>
    </li>
    <li>
      <a href="files/richard.html">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.html">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>

jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 ,  或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。</div><div><strong>注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。</strong></div><div><br /></div>

目录
相关文章
|
7天前
|
Java Windows
【Azure Function】部署Java Function失败:报错deploy [ERROR] Status code 401和警告 'China North 3' may not be a valid region
1:deploy [ERROR] Status code 401, (empty body). 2: China North 3 may not be a valid region,please refer to https://aka.ms/maven_function_configuration#supported-regions for values. 3:  <azure.functions.maven.plugin.version>1.36.0</azure.functions.maven.plugin.version>
23 11
|
3月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
63 6
|
4月前
|
JavaScript 前端开发
jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
28 2
|
4月前
|
JavaScript 前端开发
jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
25 1
|
4月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
264 2
|
5月前
【Azure Function App】在ADF(Azure Data Factory)中调用 Azure Function 时候遇见 Failed to get MI access token
【Azure Function App】在ADF(Azure Data Factory)中调用 Azure Function 时候遇见 Failed to get MI access token
|
5月前
|
网络协议
【Azure 应用服务】Azure Data Factory中调用Function App遇见403 - Forbidden
【Azure 应用服务】Azure Data Factory中调用Function App遇见403 - Forbidden
|
8月前
|
JSON 数据格式
这个错误信息表示在执行`requests.post(url, data=data, headers=head).json()`时出现了问题
这个错误信息表示在执行`requests.post(url, data=data, headers=head).json()`时出现了问题
106 2
|
8月前
|
Web App开发 前端开发 JavaScript
AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式
AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式
79 0
|
前端开发 Java
Ajax基本案例详解之load的实现
Ajax基本案例详解之load的实现

热门文章

最新文章