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

一、总结

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

1、load函数的必选参数是什么(根据功能想)?

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

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

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

2、ajax如何加载别的页面(.html)?

直接用load方法即可

load方法一句代码就可以了

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

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

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、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
p{background: #ccc;color: rgb(100,50,150);width: 600px;text-indent: 2em}
</style>
</style>
</head>
<input type="button" id="btn" value="Ajax测试">
<div id="test"></div>
<body>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('#test').load('test.html .p2')
})
})
</script>
</body>
</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. Hi3531D搭建环境时,出现的问题

    1.展开SDK包得时候,运行./sdk.unpack得时候出现: 原因:ubuntu14.04中默认得是dash,要将dash改成bash. 解决方法:sudo ln -fs /bin/bash /b ...

  2. sigprocmask, sigpending, sigsuspend的用法

    sigset_t set sigemptyset(&set) :清空阻塞信号集合变量 sigfillset(&set) :添加所有的信号到阻塞集合变量里 sigaddset(& ...

  3. jquery15 on() trigger() : 事件操作的相关方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. H.264视频编解码SoC满足高清DVR设计需求

    硬盘录像机(DVR)作为监控系统的核心部件之一,在10年里高速发展,从模拟磁带机的替代品演变成具有自己独特价值的专业监控数字平台,并被市场广泛接受.监控系统伴随DVR这些年的发展向着IP化.智能化发展 ...

  5. 64。node.js 中间件express-session使用详解

    转自:http://jinjiakarl.com/2018/06/09/node-js-%E4%B8%AD%E9%97%B4%E4%BB%B6express-session%E4%BD%BF%E7%9 ...

  6. 41.内存函数实现(memcpy,memset,memmove,memicmp,memchr.memccpy)

    memcpy #include <stdio.h> #include <stdlib.h> #include <memory.h> void * mymemcpy( ...

  7. A股借壳上市?暂时没戏

    近期股市波动,让不少P2P概念股打回原型.同花顺数据显示,上周五P2P概念股整体下跌9.28%,其中除了5家上市公司停牌外,14家P2P概念股跌幅都超过了9%.此前大热的多伦股份自6月23日以来,股价 ...

  8. C++ 补课(一)

    1,在C语言中,全局变量必须声明在所有的函数之前,局部变量必须声明在所有可执行语句之前: C++ 允许在代码块的任何位置对局部变量进行声明 2,常量定义方面,C语言 #define 可能因计算的优先级 ...

  9. deep-in-es6(一)

    一 迭代器和for-of循环 以前的一些遍历数组: function c(n) { console.log(n); } 方法一: for(let i = 0;i < arr.length;i++ ...

  10. 【Codeforces Round #428 (Div. 2) B】Game of the Rows

    [Link]:http://codeforces.com/contest/839/problem/B [Description] 给你n排的如题目所示的位置; 同一排中(1,2) 算相邻; (3,4) ...