局部方法$("html").load()和全局方法$.get()、$.post()
一、.load()
.load()方法可以参数三个参数:url(必须,请求 html 文件的 url 地址,参数类型为 String)、
data(可选,发送的 key/value 数据,参数类型为 Object)、callback(可选,成功或失败的回调
函数,参数类型为函数 Function)。
如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。
//HTML
<input type="button" value="异步获取数据" />
<div id="box"></div>
//jQuery
$('input').click(function () {
$('#box').load('test.html');
});
如果想对载入的 HTML 进行筛选,那么只要在 url 参数后面跟着一个选择器即可。
//带选择器的 url
$('input').click(function () {
$('#box').load('test.html .my');
});
如果是服务器文件,比如.php。一般不仅需要载入数据,还需要向服务器提交数据,那
么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式:get 和 post。
//不传递 data,则默认 get 方式
$('input').click(function () {
$('#box').load('test.php?url=ycku');
});
//get 方式接受的 PHP
<?php
if ($_GET['url'] == 'ycku') {
echo '瓢城 Web 俱乐部官网';
} else {
echo '其他网站';
}
?>
//传递 data,则为 post 方式
$('input').click(function () {
$('#box').load('test.php', {
url : 'ycku'
});
});
//post 方式接受的 PHP
<?php
if ($_POST['url'] == 'ycku') {
echo '瓢城 Web 俱乐部官网';
} else {
echo '其他网站';
}
?>
在 Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。回调函数
也可以传递三个可选参数:responseText (请求返回)、textStatus (请求状态)、XMLHttpRequest
(XMLHttpRequest 对象)。
$('input').click(function () {
$('#box').load('test.php', {
url : 'ycku'
}, function (response, status, xhr) {
alert('返回的值为:' + response + ',状态为:' + status + ',
状态是:' + xhr.statusText);
});
});
注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest
对象属于 JavaScript 范畴,可以调用一些属性如下:
属性名 说明
responseText 作为响应主体被返回的文本
responseXML
如果响应主体内容类型是"text/xml"或"application/xml",
则返回包含响应数据的 XML DOM 文档
status 响应的 HTTP 状态
statusText HTTP 状态的说明
如果成功返回数据,那么 xhr 对象的 statusText 属性则返回'OK'字符串。除了'OK'的状态
字符串,statusText 属性还提供了一系列其他的值,如下:
HTTP 状态码 状态字符串 说明
200 OK 服务器成功返回了页面
400 Bad Request 语法错误导致服务器不识别
401 Unauthorized 请求需要用户认证
404 Not found 指定的 URL 在服务器上找不到
500 Internal Server Error 服务器遇到意外错误,无法完成请求
503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
三.$.get() 和$.post()
.load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和
$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,
而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。
$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务
器返回的内容格式:包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数,
后面三个为可选参数。
//使用$.get()异步返回 html 类型
$('input').click(function () {
$.get('test.php', {
url : 'ycku'
}, function (response, status, xhr) {
if (status == 'success') {
$('#box').html(response);
}
}) //type 自动转为 html
});
注意:第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断,并不
需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。
//使用$.get()异步返回 xml
$('input').click(function () {
$.get('test.xml', function (response, status, xhr) {
$('#box').html($(response).find('root').find('url').text());
}); //type 自动转为 xml
});
注意:如果载入的是 xml 文件,type 会智能判断。如果强行设置 html 类型返回,则会
把 xml 文件当成普通数据全部返回,而不会按照 xml 格式解析数据。
//使用$.get()异步返回 json
$.get('test.json', function (response, status, xhr) {
alert(response[0].url);
});
$.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的
不同,在用户使用上体现不出。具体区别如下:
1.GET 请求是通过 URL 提交的,而 POST 请求则是 HTTP 消息实体提交的;
2.GET 提交有大小限制(2KB),而 POST 方式不受限制;
3.GET 方式会被缓存下来,可能有安全性问题,而 POST 没有这个问题;
4.GET 方式通过$_GET[]获取,POST 方式通过$_POST[]获取。
//使用$.post()异步返回 html
$.post('test.php', {
url : 'ycku'
}, function (response, status, xhr) {
$('#box').html(response);
});
四.$.getScript() 和$.getJSON()
jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件;
$.getJSON(),用于专门加载 JSON 文件。
有时我们希望能够特定的情况再加载 JS 文件,而不是一开始把所有 JS 文件都加载了,
这时课时使用$.getScript()方法。
//点击按钮后再加载 JS 文件
$('input').click(function () {
$.getScript('test.js');
});
$.getJSON()方法是专门用于加载 JSON 文件的,使用方法和之前的类似。
$('input').click(function () {
$.getJSON('test.json', function (response, status, xhr) {
alert(response[0].url);
});
});
局部方法$("html").load()和全局方法$.get()、$.post()的更多相关文章
- vue组件定义全局方法
1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法
- load和initialize方法
一.load 方法什么时候调用: 在main方法还没执行的时候 就会 加载所有类,调用所有类的load方法. load方法是线程安全的,它使用了锁,我们应该避免线程阻塞在load方法. 在项目中使 ...
- ASP.Net 在Update Panel局部刷新后 重新绑定JS方法
我们知道Asp.Net中的Update Panel可以完成页面的局部刷新(实质上是Ajax),但是局部刷新完后,此区域的控件上所绑定的JS方法就会失效,因为我们用如下方法来重新绑定. var prm ...
- mysql中的load命令使用方法
使用mysql 中的load 命令,可以将txt 文件中的内容加载到数据库表中 使用mysql 中的load 命令,讲txt 文件中的内容加载到数据库表中,例如,创建table,名称是user,一个字 ...
- 细说OC中的load和initialize方法
OC中有两个特殊的类方法,分别是load和initialize.本文总结一下这两个方法的区别于联系.使用场景和注意事项.Demo可以在我的Github上找到--load和initialize,如果觉得 ...
- iframe局部刷新的二种实现方法
需求描述: 当页面有一部分是不变的或整个页面的图片很多时,可以考虑使用局部刷新,以提高整体的下载速度与用户体验. 1,iframe实现局部刷新的方法一 复制代码代码示例: <script t ...
- python2在安装pywin32后出现ImportError: DLL load failed 解决方法
python2在安装pywin32后出现ImportError: DLL load failed 解决方法 在python2中有时候会出现: import win32api ImportError ...
- hibernate session的load和get方法
@Test public void testLoad() { Session session = sessionFactory.getCurrentSession(); session ...
- vue定义全局变量和全局方法
一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const ...
随机推荐
- HTML 表格标签
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, ce ...
- 使用 C++11 编写类似 QT 的信号槽——下篇
要实现 Signal-Slot,Signal 类中应该拥有一个保存 std::function 的数组: template<class FuncType> class Signal { p ...
- 16 MySQL--正确使用索引
count 统计 count(*)和count(字段名) 基本结果是一样的 但是一种情况例外,就是当某字段名下边的数据有null值的时候,不计入这个count中,*则全部列入count中 一 .索引未 ...
- ABAP-消息发布
FUNCTION ZSDI0009_DO_INFOMESSAGE. *"----------------------------------------------------------- ...
- Producer-consumer problem in Python
from: http://agiliq.com/blog/2013/10/producer-consumer-problem-in-python/ By : Akshar Raaj We will s ...
- webserive学习记录3-eclipse创建webservice
在用J2EE版的ECLIPSE学习WEBSERVICE的时候发现原来直接用该ECLIPSE就可以创建webservice,然后就自己动手用ECLIPSE自带的功能来建立WEBSERVICE服务端和客户 ...
- 2018 Jar_Feb_Newwords
检测钩子程序 开发一个检测钩子程序的工具 - 豆丁网http://www.docin.com/p-1363993661.html pdf掺杂病毒的方法 Java的:xml文件中跳过的二进制数据在解析 ...
- Word 2003-在一个方框里打勾或打叉
最近有个同事问我,如何在Word中输出一个方框中打勾的符号?查了一下帮助,其实很简单,特记录如下,供碰到的朋友参考: 一.在方框中打勾的方法: 先输入一个大写字母R,然后将R选中,将字体改为“Wind ...
- conductor Kitchensink示例
一个示例的厨房工作流程,演示了所有模式构造的使用. 定义 { "name": "kitchensink", "description": & ...
- css3 fileter始终效果 图片渲染
http://www.w3cplus.com/css3/ten-effects-with-css3-filter