jquery接触初级-----ajax 之:load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson()
1.load()方法
格式:load( url,[,data],[,function] ) // 参数加上括号,表示参数是可选参数
1.1 写一个文件:test.html
<div class="containt">
<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>
</div>
</div>
1.2 写一个添加文件:tiajia.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<script>
$(function() {
$("#send").click(function() {
$("#resText").load("test.html");
});
});
</script>
</head>
<body>
<input type="button" id="send" value="ajax获取">
<div class="comment">已有评论:</div>
<div id="resText"></div>
</body>
</html>
打开文件:http://localhost/aaa/tiajia.html

F12 键查看网页代码:发现把整个网页都加载进来了,包括meta标签,这似乎不是我们想要的

在加载函数 load 里加入选择器标签,可以达到只加载需要的行的效果:在要加载的文件后面跟上选择器,就ok了
<script>
$(function() {
$("#send").click(function() {
$("#resText").load("test.html .containt");
});
});
</script>

1.3 load(url,function(reponseText,textStatus,XMLHttpRequest){ .... });
reponseText :是回调函数返回的值
textStatus:是回调函数的执行结果 ,有四种结果:success,error,not modified,timeout
XMLHttpRequest:是XMLHttpRequest 对象
<script>
$(function() {
$("#send").click(function() {
$("#resText").load("test.html .containt", function(reponseText, textStatus, XMLHttpRequest) {
console.log(typeof reponseText);
console.log(reponseText);
});
});
});
</script>
点击后结果:

输出textStatus 和XMLHttpRequest 对象:
<script>
$(function() {
$("#send").click(function() {
$("#resText").load("test.html .containt", function(reponseText, textStatus, XMLHttpRequest) {
console.log(textStatus);
console.log(XMLHttpRequest);
});
});
});
</script>
结果:

变更url 为一个不存在的文件 test1.html
<script>
$(function() {
$("#send").click(function() {
$("#resText").load("test1.html .containt", function(reponseText, textStatus, XMLHttpRequest) {
console.log(textStatus);
console.log(XMLHttpRequest);
});
});
});
</script>
运行结果:没有载入成功,这样就通过判断执行状态,确认是否载入文件成功了

另外:
1. load()方法,无论是否载入成功,都会执行回调函数
2. 当load()方法中传递data参数时,调用post方法进行传值,当没有data参数时,调用的是get方法
jquery接触初级-----ajax 之:load()方法的更多相关文章
- jquery接触初级-----ajax 之:jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...
- Ajax的load方法演示
load方法的参数形式为: load(url,[data],[callback]); 其中url为请求HTML页面的URL地址.[data]表示发送至服务器的key/value数据.callback表 ...
- jQuery Ajax之load()方法
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJ ...
- 黑马day18 jquery高级特性&Ajax的load方法
介绍jquery中的load方法: (1).前面没有jquery.修饰,能够判断出他是一个普通的非全局函数(也就是说是一个局部函数):$.,$().,jquery.等修饰的就是全局函数.没有这些修饰的 ...
- jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)
1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callba ...
- jQuery为啥要提供一个load()方法?
上午的时候,找个闲暇事件整理之前整理的一些关于jQuery的东西,看到了一个之前做的jQuery的$(document).ready()与window.onload()方法的比較. 上面两个方法最重要 ...
- jquery接触初级-----juqery选择器实例
jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...
- jquery的load()事件和ajax中load()方法的区别
load事件 当图像加载时,改变 div 元素的文本: $("img").load(function(){ $("div").text("Image ...
- jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...
随机推荐
- 用ADB打开MUMU模拟器的WLAN用于设置代理IP
adb connect 127.0.0.1:7555 adb shell am start -a android.intent.action.MAIN -n com.android.settings/ ...
- 关于oracle的sqlplus显示不完全的修改方法
这样的显示看起来很痛苦 需要换行的时候没有进行换行,不需要换行的时候却进行了换行 参考的博客地址 https://blog.csdn.net/pan_tian/article/details/8059 ...
- optparse模块解析命令行参数的说明及优化
一.关于解析命令行参数的方法 关于“解析命令行参数”的方法我们一般都会用到sys.argv跟optparse模块.关于sys.argv,网上有一篇非常优秀的博客已经介绍的很详细了,大家可以去这里参考: ...
- AMQP & JMS对比(转载)
AMQP & JMS对比 原文地址:https://blog.csdn.net/hpttlook/article/details/23391967 初次接触消息队列时,在网上搜索,总是会提到如 ...
- https证书的验证过程与生成方法
1.简洁的解释: 1.服务器 用RSA生成公钥和私钥2.把公钥放在证书里发送给客户端,私钥自己保存3.客户端首先向一个权威的服务器检查证书的合法性,如果证书合法,客户端产生一段随机数,这个随机数就作为 ...
- SCCM 2012 R2实战系列之八:OSD(上)--分发全新Windows7系统
今天将跟大家一起分享SCCM 中最为重要的一个功能---操作系统分发(OSD),在此文章中会讨论到OSD的初始化配置.镜像的导入.任务序列的创建编辑.并解决大家经常遇到的分发windows7系统分区盘 ...
- 梳理源码:spring ioc容器加载的流程图
- Solr——Windows下部署Solr6.6.0至Tomcat8.5.28(二)
1,core理解 如果把solr理解为个数据库的话,那么core可以理解为数据库中的一张表,其实就是数据集合 在写本片文章之前看到网上很多教程都说需要找到solr.xml来配置core的信息,特此说明 ...
- Struts2学习:HelloWorld
项目结构: 1.用IDEA新建一个SpringBoot+Maven的项目 2.新建的项目是没有webapp.WEB-INF.与web.xml文件的,需要在下图中添加: 3.在pom.xml引入stru ...
- JQ 文本超出
原链接:https://blog.csdn.net/sinat_32546159/article/details/56340528 <script type="text/javascr ...