前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jQuery - AJAX load() 方法

jQuery - AJAX load() 方法

原创
作者头像
陈不成i
修改于 2021-07-22 06:28:24
修改于 2021-07-22 06:28:24
1.5K00
代码可运行
举报
文章被收录于专栏:ops技术分享ops技术分享
运行总次数:0
代码可运行

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件("demo_test.txt")的内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<h2>jQuery AJAX 是个非常棒的功能!</h2> 
<p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

实例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:

实例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jQuery,和嵌入其中的Ajax
jQuery库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
PM吃瓜
2019/08/12
3.1K0
jQuery,和嵌入其中的Ajax
jQuery - AJAX 简介及AJAX load() 方法
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
用户7718188
2021/10/07
9950
jQuery AJAX load()方法中代码执行顺序的问题
问题来源于菜鸟教程介绍 jQuery load() 方法时用的一个实例: JS:
Chor
2019/11/08
1.5K0
jQuery ajax - ajax()方法
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
江一铭
2022/06/17
9.4K0
JavaWeb全栈开发前后端交互通用标准
在开发中,URL主要是由后台来写好给前端。 若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数)。
JavaEdge
2021/02/22
7.8K0
JQuery笔记
JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行
菜鸟雷
2020/10/23
6.1K0
JQuery笔记
【一起来烧脑】读懂JQuery知识体系
在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库,写得少,做的多,导致jQuery有很多技术人员在使用它做项目。
达达前端
2019/07/16
2.6K0
【一起来烧脑】读懂JQuery知识体系
jQuery 教程
菜鸟教程 — jQuery 教程:https://www.runoob.com/jquery/jquery-tutorial.html
全栈程序员站长
2022/09/03
17.1K0
jQuery 教程
jQuery
当Jquery名称冲突时,可以利用var jq = jQuery.noConflict()来使用jq代替表示Jquery。
matt
2022/10/25
16.4K0
JavaScript强化教程——jQuery AJAX 实例
本文为H5EDU机构官方HTML5培训教程,主要介绍JavaScript强化教程——jQuery AJAX实例。文章介绍了AJAX的基本概念,以及使用AJAX的应用程序案例,并详细讲解了jQuery的load()方法进行AJAX请求的方法和示例。最后,通过一个完整的示例,展示了如何使用jQuery实现AJAX请求,并加载外部内容到指定的元素中。
IMWeb前端团队
2018/01/08
1.1K0
jQuery基础系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
达达前端
2019/07/03
2.6K0
jQuery基础系列
Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记 笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套.
py3study
2020/01/19
5.5K0
jQuery基础图文系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
菲宇
2019/07/31
4.5K0
jQuery基础图文系列
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数。而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明。 1 $.get("data.php",$("#firstName.val()"),function(data){ 2 3
用户1214487
2018/01/24
3.9K0
jQuery ajax() 方法
jQuery 库拥有完整的 Ajax 兼容套件,其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
阳光岛主
2019/02/19
2.5K0
jQuery ajax() 方法
Ajax Step By Step1
jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。
wfaceboss
2019/04/08
4730
jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法
http://www.w3school.com.cn/jquery/ajax_ajax.asp
一个会写诗的程序员
2018/08/17
14.5K0
jQuery 简介
https://www.runoob.com/jquery/jquery-syntax.html
zhangjiqun
2024/12/17
830
jQuery 简介
JQuery 入门学习(三)
    相信很多朋友已经期待已久了,Jquery结合ajax的应用。这一节涉及到浏览器与服务器的交互,我用到的是php,如果各位看官不会php脚本也没有关系,涉及到的php代码最多10行,重点还是在Jquery上。
phith0n
2020/10/16
8.7K0
JQuery 入门学习(三)
JQuery基础
学习jQuery的时候,很快过了一遍,发现好多知识点不清晰。看来还是要写出来加深印象,平时多练习! jQuery是一个Javascript函数库,轻量级,“写得少,做的多!”,它有以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities(实用工具) 很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器,包括IE6(不失为解决兼容性的一种方法)。
用户1149564
2018/01/11
4.7K0
JQuery基础
相关推荐
jQuery,和嵌入其中的Ajax
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文