jQuery之load方法

load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。
callback:载入成功时回调函数。

代码一：

加载整个界面

test.html代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="comment"><h6>张三:</h6><p class="para">沙发.</p>
</div>
<div class="comment"><h6>李四:</h6><p class="para">板凳.</p>
</div>
<div class="comment"><h6>王五:</h6><p class="para">地下室.</p><p class="para">-1层.</p><p class="para">-2层.</p><p class="para">-3层.</p>
</div>
</body>
</html>

html部分：

<body>
<input type="button" id="send" value="Ajax获取" />
<div  class="comment">已有评论：
</div>
<div id="resText" ></div>
</body>

jQuery部分：

<script language="javascript" type="text/javascript">$(function(){$("#send").click(function(){$("#resText").load("test.html");})})
</script>

代码二：

加载过滤后界面

<script language="javascript" type="text/javascript">$(function(){$("#send").click(function(){$("#resText").load("test.html .para");})})
</script>

将页面中class为para的加载进来。

代码三：

成功后的回调动作

<script language="javascript" type="text/javascript">$(function(){$("#send").click(function(){$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){alert( $(this).html() );    //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]alert(responseText);       //请求返回的内容alert(textStatus);            //请求状态：success，erroralert(XMLHttpRequest);     //XMLHttpRequest对象
            });})})
</script>

jQuery之load方法相关推荐

使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题参考文章: (1)使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 ( ...
js中load载入html页面,使用jquery的load方法加载html页面，但是html引入的js不生效
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提有一个公共的登录弹框页面需要在多个页面引用,百度后就使用了jQuery 的 load 方法. 做法: 将公共的 ht ...
jQuery的load()方法
load() 从服务器加载数据,并把返回的数据,放入被选元素中语法格式 $(selector).load(URL,data,callback); 参数说明 URL 必选参数,加载的URL 可以把jQ ...
【JQuery】关于jQuery的load方法在Laravel里的使用
Laravel版本: Laravel 8 jQuery版本: jquery/3.2.1/jquery.min.js 前言由于在 jQuery 的 load 的方法里携带参数时,对于对象参数,提交时使 ...
ajax load html页面,jQuery – AJAX load() 方法 | 菜鸟教程
为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件,使用下列方法进行导入: //1.当前文件中要插入的地方使用此结构: //2.***.html中放 ...
ajax的添加方法,jQuery - AJAX load（）方法如何添加2多变量
我有这段代码.我需要添加一个sub_season var.如何添加更多的var?我在谷歌托盘看,但没有结果. 谢谢你,如果你帮我!jQuery - AJAX load()方法如何添加2多变量 echo ...
html模块化标签,jq load()方法实现html 模块化。
在我们写项目的时候,会遇到一个模块在多个页面使用,如果没有页面都写一次,那就太费劲了. 如果你使用了框架(vue,react,Angular)的话,那框架都有模块化,可以轻松解决. 如果你使用原生开发 ...
jQuery速记Ajax方法简介
如果您从未听说过Ajax这个词,请举手. 我敢打赌,几乎所有人的手臂都向下垂,靠近他们的身体. Ajax 最初代表异步JavaScript和XML ,它是最常用的客户端方法之一,可帮助创建异步网站和W ...
html load方法的区别,jQuery 中的.load()、$get()、$,post()用法和区别
.load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获取, ...

jQuery之load方法

jQuery之load方法相关推荐

最新文章

热门文章