前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jquery中load的用法

jquery中load的用法

作者头像
OECOM
发布于 2020-07-01 09:27:44
发布于 2020-07-01 09:27:44
1K00
代码可运行
举报
文章被收录于专栏:OECOMOECOM
运行总次数:0
代码可运行

2016-12-28 10:36:25

本文主要介绍的是jquery中load的使用方法,以及应注意的事项

一 参数介绍

调用load方法的完整格式是:load( url, [data], [callback] ),其中

url:是指要导入文件的地址。

data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。

callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。即回调函数

二 参数中url的使用

1.加载一个php文件,该php文件不含传递参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myID").load("test.php"); 
//在id为#myID的元素里导入test.php运行后的结果

2.加载一个静态html页面

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myID").load("test.html"); 
//在id为#myID的元素里导入test.html运行后的结果

3.加载一个jsp页面,不含参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myID").load("http://1.1.1.1/p/test.do");

在url中同样可以传递参数,例如

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myID").load("test.html?parmea=34");

其他的几种加载页面方式类似。通过这种方式来传递参数是通过get的方式来传递的。

三 参数中data的使用

  1. 加载一个php页面,带有参数
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myID").load("test.php",{"name" : "Adam"});

2. 加载一个php页面,内部有多个参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#myID").load("test.php",{"name" : "Adam""site":"61dh.com"});

需要注意的一点是通过data来传递的参数是通过post的方式来传递的。

四 参数中callback的使用

比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#go").click(function(){ 
$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){ 
$("#myID").fadeIn('slow');} 
); 
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-12-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Ajax Step By Step1
jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。
wfaceboss
2019/04/08
4730
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函数:$.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学习笔记
jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档
Mirror王宇阳
2020/11/13
7.4K0
jQuery学习笔记
jQuery Ajax 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
用户7353950
2022/05/10
9.6K0
jQuery Ajax 全解析
jQuery,和嵌入其中的Ajax
jQuery库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
PM吃瓜
2019/08/12
3.1K0
jQuery,和嵌入其中的Ajax
jquery $.postjQuery.post()
Description: Load data from the server using a HTTP POST request.
全栈程序员站长
2022/07/08
8470
JavaScript 框架学习(JQuery)
参考: http://www.w3cschool.cc/jquery/jquery-tutorial.html
lpe234
2020/07/28
7.8K0
jQuery ajax() 方法
jQuery 库拥有完整的 Ajax 兼容套件,其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
阳光岛主
2019/02/19
2.5K0
jQuery ajax() 方法
原生JS与jQuery对AJAX的实现
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
山河木马
2019/03/05
3K0
原生JS与jQuery对AJAX的实现
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的Ajax(3)
———————————————————————————— 6.0 jQuery ajax 浏览器给我们提供的XMLHttpRequest的作用是来发送http请求。 js代码发送一个http的请求 XMLHttpRequest的四步:创建对象、注册监听、建立连接、发送数据
王小雷
2019/05/26
9040
JQuery笔记
JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行
菜鸟雷
2020/10/23
6.1K0
JQuery笔记
jquery ajax参数详解
type:boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
别团等shy哥发育
2023/02/25
2.5K0
jQuery 基本语法
jQuery,一个 JavaScript 库,极大地简化了 JavaScript 编程,很容易学习。它是一款同prototype、Note.js等一样优秀的js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的!
阳光岛主
2019/02/19
3.9K0
jQuery 基本语法
jQuery 教程
菜鸟教程 — jQuery 教程:https://www.runoob.com/jquery/jquery-tutorial.html
全栈程序员站长
2022/09/03
17.1K0
jQuery 教程
JQuery-命令速查-CheatSheet
http://stackoverflow.com/questions/31379409/form-submission-causing-maximum-call-stack-size-exceeded
szhshp
2022/09/21
9.7K0
java中的jQuery与Ajax的应用,菜鸟教程
1. Ajax,并不是指一种单一的技术,而是有机的利用了一系列交互式网页应用相关的技术所形成的结合体。Ajax揭开了无刷新更新页面的新时代,并有代替系统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑。Ajax全称(Asynchronous JavaScript and XML),即异步JavaScript和XML。实现客户端异步请求操作,不刷新整个页面进行服务器通信,减少等待时间。
全栈程序员站长
2022/07/23
1.4K0
java中的jQuery与Ajax的应用,菜鸟教程
JavaWeb全栈开发前后端交互通用标准
在开发中,URL主要是由后台来写好给前端。 若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数)。
JavaEdge
2021/02/22
7.8K0
一个小时学会jQuery
前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介与第一个jQuery程序 1.1、jQu
张果
2018/01/04
18.6K0
一个小时学会jQuery
相关推荐
Ajax Step By Step1
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文