js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

一、总结

一句话总结：jQuery load()方法作用是从服务器加载数据，是一个简单但强大的AJAX方法。

1、load函数的必选参数是什么（根据功能想）？

必选参数就是要加载页面的url，也可以选择加载文件的哪一个部分

下面的代码时直接加载test.html 的 .p2部分

  1. 20             $('#test').load('test.html .p2')

2、ajax如何加载别的页面（.html）？

直接用load方法即可

load方法一句代码就可以了

3、如何实现博客园相关文章推荐功能？

ajax的load方法即可，load方法加载页面

  1. 20             $('#test').load('test.html .p2')

4、load方法的监听对象是谁？

你想把内容加载到哪个元素，你就去监听谁

二、jquery的ajax系列中的load方法的作用是什么

1、相关知识

load()方法

jQuery load()方法作用是从服务器加载数据，是一个简单但强大的AJAX方法。

  • .load()从服务器加载数据，然后把返回到HTML放入匹配元素。

    语法：load(url,data,function(response,status,xhr))

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

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

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

  • 回调函数参数含义

    1. responseTxt-包含调用成功时的结果内容

    2. statusTXT-包含调用的状态：可能是"success"、"notmodifide"、"error"、'timeout"、"abort"或"parsererror"中的一个，最长见的是：succes成功;error错误

    3. Xhr-经过jQuery封装的XMLHttpRequest对象（保留其本身的所有属性和方法）

 

2、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <style>
  4.  </style>
  5.  <head>
  6.      <meta charset="UTF-8">
  7.      <title>演示文档</title>
  8.      <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  9.      <style type="text/css">
  10.      p{background: #ccc;color: rgb(100,50,150);width: 600px;text-indent: 2em}
  11.        </style>
  12.  </style>
  13.  </head>
  14.      <input type="button" id="btn" value="Ajax测试">
  15.      <div id="test"></div>
  16.  <body>
  17.  <script type="text/javascript">
  18.      $(function(){
  19.          $('#btn').click(function(){
  20.              $('#test').load('test.html .p2')
  21.          })
  22.      })
  23.  </script>
  24.  </body>
  25.  </html>
 

js进阶 14-1 jquery的ajax系列中的load方法的作用是什么的更多相关文章

  1. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

随机推荐

  1. python数据处理技巧二

    python数据处理技巧二(掌控时间) 首先简单说下关于时间的介绍其中重点是时间戳的处理,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00 ...

  2. LRJ入门经典-0906最短公共父串305

    原题 LRJ入门经典-0906最短公共父串305 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 给定字符串A和字符串B,要求 ...

  3. Spring Cloud学习笔记【一】Eureka服务注册与发现

    Spring Cloud Eureka 是 Spring Cloud Netflix 微服务套件的一部分,基于 Netflix Eureka 做了二次封装,主要负责完成微服务架构中的服务治理功能,服务 ...

  4. Android底层驱动开发（一）

    1   Android为什么要增加硬件抽象层HAL A    统一硬件调用接口.所以利用HAL屏蔽linux驱动的复杂不统一的接口 B   解决GPL版权问题,因为linux内核基于GPL协议.这个G ...

  5. 怎样用redis实现分布式锁

    引子 redis作为一个强大的key/value数据库.事实上还能够用来实现轻量级的分布式锁. 1.实现方案1 最早官方在SETNX命令页给了一个实现: acquire lock: SETNX loc ...

  6. 游戏server之server优化思路

    本文仅仅是提供一些游戏server优化思路,当中一些思路是用在不同场合的,不是同个架构的.须要依据应用场景选用合适方式. 本文的引用的文章都是在自己写的在本博客内的.也都是上线开几百个服的成熟项目的. ...

  7. vim 基础学习之可视模式

    1. 选择模式这个模式必须通过可视模式进入.在可视模式下,我们通过 <C-g>来把我们的可视选中块作为选择模式下的操作块. 这时候我们输入可见字符,就会把这个块给覆盖掉.例如aaa bbb ...

  8. MySql_Learn

    1 id 自增长  auto_increment 2 获取当前时间 now() 3 新增字段 修改字段名称 简单分页功能  limit 10 offset 20;  查询第21到30条数据 selec ...

  9. mapper提示Could not autowire. No beans of … type found？

    工具及背景: IntelliJ IDEA 2016.1.3 Ultimate.spring boot, maven项目,利用mybatis 注解的方式查询mysql 在自动生成工具生成代码后,serv ...

  10. ORM进阶：Hibernate的优劣对照

    hibernate是一种是轻量级的ORMapping框架.学过EntityFramework的.会感觉挺亲切的. 对于各种层次程序猿对数据库的设计: 小菜程序员这样做:首先考虑数据的存储,对于功能的实 ...