`

jQuery - AJAX load() 方法

 
阅读更多
load() 从服务器加载数据，并把返回的数据放入被选元素中。
在不重载全部页面的情况下，实现了对部分网页的更新。

语法：$(selector).load(URL,data,callback(responseTxt,statusTxt,xhr));
      必需的 URL 参数规定您希望加载的 URL。
      可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
      可选的 callback 参数是 load() 方法完成后所执行的函数名称。
回调函数callback的参数：
      responseTxt - 包含调用成功时的结果内容
      statusTXT - 包含调用的状态
      xhr - 包含 XMLHttpRequest 对象

实例：把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
"demo_test.txt"的内容：
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
                
<script>
$(document).ready(function(){
  $("button").click(function(){      
    $("#div1").load("jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>
<h3 id="test">请点击按钮通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>


                
  • 大小: 44.1 KB
  • 大小: 31.7 KB
分享到：
| jquery选择器有没空格大不同
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery ajax - load() 方法

    在 `jQuery` 的 `ajax` 家族中，`load()` 方法是一个非常实用的成员，主要用于从服务器加载HTML内容，并将其插入到指定的DOM元素中。本篇文章将深入探讨 `jQuery` 的 `load()` 方法，以及如何有效地使用它。 `load...

    WEB开发 之 jQuery - AJAX load() 方法.docx

    本文将深入探讨jQuery中的一个关键Ajax方法——`load()`，它允许开发者从服务器动态地加载数据并将其插入到网页的指定元素中。 `load()`方法是jQuery提供的一个简便且功能强大的Ajax功能，其主要作用是异步获取远程...

    jquery-ajax教程

    通过本文的学习，我们不仅了解了原始Ajax与jQuery中Ajax的区别，还深入探讨了jQuery提供的Ajax函数及其使用方法。jQuery简化了Ajax操作，使得开发人员能够更加专注于业务逻辑而不是底层技术实现。无论是初学者还是有...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **AJAX请求**：`.ajax()`, `.get()`, `.post()`等方法使得异步数据交换变得简单，同时，`.load()`可以实现局部页面的动态加载。 - **动画效果**：`.fadeIn()`, `.slideUp()`, `.animate()`等动画函数为网页增加...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    4. Ajax交互：`.ajax()`, `.getJSON()`, `.load()`等函数封装了异步请求，简化了与服务器的通信过程。 5. 插件生态：jQuery拥有丰富的插件生态系统，如jQuery UI、jQuery Validation等，为开发者提供了强大的扩展...

    jquery-get-post-load 方法

    ### jQuery中的GET、POST与LOAD方法详解...jQuery 的 GET、POST 和 LOAD 方法以及 AJAX 方法为开发者提供了强大的工具来处理客户端与服务器之间的数据交互。通过合理运用这些方法，可以极大地提升 Web 应用的用户体验。

    jquery-ajax全面解析

    ### jQuery-Ajax全面解析 #### 一、简介 在现代Web开发中，AJAX...开发者可以根据具体的应用场景灵活选择使用`.load()`、`.get()`、`.post()`或更通用的`$.ajax()`方法，以实现高效、可靠的前端与后端交互。

    jQuery-AJAX.zip_jquery ajax

    二、jQuery中的AJAX方法 1. `$.ajax()`: 这是最常用的AJAX函数，它可以接受一系列参数，包括URL、请求类型（GET或POST）、数据、回调函数等，可以进行复杂的AJAX请求。 2. `$.get()`: 用于发起GET请求，它接受URL...

    jquery-3.3.1.js/min.js

    `.getJSON()`、`.load()`等方法则针对特定需求提供了更简便的接口。 五、其他特性 jQuery 3.3.1还包含了一些实用工具方法，如`.each()`用于遍历集合，`.extend()`用于对象合并，`.trim()`用于字符串去空格，以及`....

    前端开源库-jquery-lazyload

    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.7/jquery.lazyload.min.js"&gt; ``` - **标记图片**：将需要延迟加载的图片添加特定的类名，例如`lazyload`。 ```html ...

    jQuery-ajax.rar_jquery

    除了$.ajax()，jQuery还提供了简化的$.get(), $.post()，以及用于获取和更新HTML片段的$.load(), $.html()等方法。例如，$.get()用于GET请求： ```javascript $.get('http://example.com/api/data', function...

    jquery-1.12.4.min.js ZIP包2

    此外，还有`.load()`、`.get()`和`.post()`等简化版的Ajax函数，方便快速实现数据的获取和更新。 4. **动画效果**：jQuery的动画功能是其广受欢迎的原因之一。`.fadeIn()`, `.slideUp()`, `.animate()`等方法使得...

    jquery-ajax.zip_java programming

    jQuery提供了方便的Ajax方法，如`$.ajax()`, `$.get()`, `$.post()`等，使开发者可以轻松地实现异步请求。 【jQuery与Ajax的结合】 1. **$.ajax()**：这是jQuery中最全面的Ajax函数，可以自定义所有Ajax请求的参数...

    jQuery - AJAX load() 实例用法详解

    总之，jQuery 的 `load()` 方法是实现AJAX请求的一种直观且易于使用的途径，能够轻松地将服务器端内容插入到网页的指定位置，从而创建更动态、交互性更强的用户体验。结合适当的回调函数，可以有效地处理成功和失败...

    jquery-1.9.0.min.js

    `.load()`、`.unload()`和`.error()`等旧版Ajax和事件处理方法被`.on()`和`.off()`替代，提高了事件处理的灵活性。 此外，jQuery 1.9.0还加强了对HTML5新特性的支持，如`.data()`方法可以更方便地处理HTML5数据属性...

    jquery-1.10.2.js 和 jquery-1.10.2.min.js 【jquery-1.10.2包合集】

    5. **Ajax交互**：jQuery的`.ajax()`方法简化了异步数据请求，支持XMLHttpRequest和JSONP，还有`.load()`,`.get()`,`.post()`等快捷方法。 6. **链式操作**：jQuery的一个显著特点是链式调用，一个选择器可以连续...

    jquery-ias.min.zip

    **jQuery Infinite Ajax Scroll (IAS)** 是一款非常实用的JavaScript插件，主要应用于网页的无限滚动效果，即在用户滚动页面时，内容会自动通过Ajax方式加载，为用户提供无缝的浏览体验。这个插件的核心功能是当用户...

    struts2-jquery-plugin使用手册，自己写的

    - 通过这些标签，可以轻松地将jQuery功能集成到Struts2的动作方法中，比如通过`&lt;sj:submit&gt;`标签实现AJAX提交。 4. **自定义行为和事件** - Struts2-jQuery-Plugin支持自定义JavaScript事件处理，可以使用`...

    jquery-3.4.1.min.zip

    6. **Ajax交互**：jQuery的`$.ajax()`, `$.get()`, `$.post()`等方法简化了异步数据请求。`getJSON()`和`load()`则分别用于获取JSON数据和加载HTML片段。 7. **插件生态**：jQuery拥有庞大的插件生态系统，如`...

    jquery-3.3.1Windows

    5. **Ajax交互**：jQuery的`.ajax()`方法是进行异步数据请求的基石，支持GET和POST等多种HTTP请求方式，同时还有`.load()`, `.getJSON()`, `.getScript()`等辅助方法，简化了数据获取和更新过程。 6. **链式操作**...

Magicbox
Global site tag (gtag.js) - Google Analytics