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()方法的更多相关文章

  1. jquery接触初级-----ajax 之:jquery_ajax 方法

    1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data:  采用键值对的方式存储于对象中; callback: 载入成功时(当 ...

  2. Ajax的load方法演示

    load方法的参数形式为: load(url,[data],[callback]); 其中url为请求HTML页面的URL地址.[data]表示发送至服务器的key/value数据.callback表 ...

  3. jQuery Ajax之load()方法

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJ ...

  4. 黑马day18 jquery高级特性&amp;Ajax的load方法

    介绍jquery中的load方法: (1).前面没有jquery.修饰,能够判断出他是一个普通的非全局函数(也就是说是一个局部函数):$.,$().,jquery.等修饰的就是全局函数.没有这些修饰的 ...

  5. jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

  6. jQuery为啥要提供一个load()方法?

    上午的时候,找个闲暇事件整理之前整理的一些关于jQuery的东西,看到了一个之前做的jQuery的$(document).ready()与window.onload()方法的比較. 上面两个方法最重要 ...

  7. jquery接触初级-----juqery选择器实例

    jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...

  8. jquery的load()事件和ajax中load()方法的区别

    load事件 当图像加载时,改变 div 元素的文本: $("img").load(function(){ $("div").text("Image ...

  9. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

随机推荐

  1. 在线学习和在线凸优化(online learning and online convex optimization)—凸化方法4

    一些在线预测问题可以转化到在线凸优化框架中.下面介绍两种凸化技术: 一些在线预测问题似乎不适合在线凸优化框架.例如,在线分类问题中,预测域(predictions domain)或损失函数不是凸的.我 ...

  2. TensorFlow安装教程(ubuntu 18.04)

    此教程的硬件条件: 1.Nvidia GPU Geforce390及以上 2.Ubuntu 18.04操作系统 3.Anaconda工具包 如果python版本为3.7及以上,使用如下命令降级到3.6 ...

  3. Keras.applications.models权重:存储路径及加载

    网络中断原因导致keras加载vgg16等模型权重失败, 直接解决方法是:删掉下载文件,再重新下载 Windows-weights路径: C:\Users\你的用户名\.keras\models Li ...

  4. AI的胜利,人类的荣耀

    在围棋界,AI战胜人类,这不是人类的耻辱,是人类的荣耀. 看到柯洁悲伤哭泣的画面,曾经放出豪言的大男孩,低下了骄傲的头.我相信经过这样一次挑战,对他的成长有好处,无论是人生,还是棋艺. 在围棋领域,人 ...

  5. Django -- settings 详解

    Django settings详解 1.基础 DJANGO_SETTING_MODULE环境变量:让settings模块被包含到python可以找到的目录下,开发情况下不需要,我们通常会在当前文件夹运 ...

  6. cobbler部署centos6与centos7系列

    cobbler部署centos6与centos7系列 转载自:http://www.jianshu.com/p/a4bed77bf40d 版权声明:完全抄自 http://www.jianshu.co ...

  7. IDEA集成git和使用步骤

    2018年07月20日 11:26:29 完猛 阅读数:3246    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/miwanmeng/artic ...

  8. Elasticsearch5.5.2安装和启动遇到哪些问题

    最近学习Elasticsearch,顺便记录下操作步骤,供日后参考 安装环境 CentOS release 6.6 1.因Elasticsearch是基于java写的,所以它的运行环境中需要java的 ...

  9. 【Python爬虫实战】微信爬虫

    所谓微信爬虫,即自动获取微信的相关文章信息的一种爬虫.微信对我们的限制是很多的,所以我们需要采取一些手段解决这些限制主要包括伪装浏览器.使用代理IP等方式http://weixin.sogou.com ...

  10. VS出现异常?!和十进制转二进制比是小事

    今天被VS的纠错机制下了一小跳. 使用VS时,如果代码出现异常,比如我,运行代码时,出现了无限循环,在调试的时候VS会自动停止运行,并在错误代码行断点提示. 之后会出现一个杂项文件,提示你这里错了.注 ...