$.get()和$.post()
.load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀。而$.get()和$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。
$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数type,即服务器返回的内容格式:包括xml、html、script、json、jsonp和text。第一个参数为必选参数,后面三个为可选参数。
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
get方式接受的PHP:
<?php
if($_GET['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有!";
}
?>
jQuery代码如下:
①通过直接在url问号后紧跟着传参
$("input").click(function() {
$.get("test.php?url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
②通过第二个参数data,字符串形式的键值对传参,然后自动转换为问号后紧跟着传参
$("input").click(function() {
$.get("test.php","url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
③通过第二个参数data,对象形式的键值对传参,然后自动转换为问号后紧跟着传参
$("input").click(function() {
$.get("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
});
});
post方式接受的PHP:
<?php if($_POST['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有!";
} ?>
jQuery代码:
①post提交不能使用问号传参
$("input").click(function() {
$.post("test.php?url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
②post提交可以使用字符串形式的键值对传参,自动转换为http消息实体传参
$("input").click(function() {
$.post("test.php","url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
③post提交可以使用对象键值对
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
});
});
使用$.post()异步返回html类型:
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
}, "html"); //php文件返回的是纯文本,默认是html或text
});
注意:第四参数type是指定异步返回的类型。一般情况下type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
},"xml"); //本身是纯文本,如果强行按照xml或者json数据格式返回的话,那么就无法获取数据了
});
服务器有test.xml文件:
<?xml version="1.0"?>
<root>
<url>www.ycku.com</url>
</root>
jQuery代码:
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//$("#box").html(response); //报错
alert(response); //[object XMLDocument]
},"xml");
});
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//$("#box").html(response);
alert(response);
},"html"); //默认type已经是xml,如果默认已经是xml,强行设置为html,则会连xml标签也返回
});
使用$.post()异步返回xml:
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//alert($(response).find("root").find("url").text());
$("#box").html($(response).find("root").find("url").text());
}); //type自动转为xml
});
注意:如果载入的是xml文件,type会智能判断,如果强行设置html类型返回,则会把xml文件当成普通数据全部返回,而不会按照xml格式解析数据。
服务器有test.json文件:
[
{
"url" : "www.ycku.com"
}
]
使用$.post()异步返回json:
$("input").click(function() {
$.post("test.json", function(response, status, xhr) {
alert(response[0].url);
}, "json");
});
$.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。具体区别如下:
- GET请求是通过URL提交的,而POST请求则是HTTP消息实体提交的
- GET提交有大小限制(2KB),而POST方式不受限制
- GET方式会被缓存下来,可能有安全性问题,而POST没有这个问题
- GET方式通过$_GET[]获取,POST方式通过$_POST[]获取(仅针对php而言)
$.getScript()和$.getJSON()
jQuery提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS文件;$.getJSON(),用于专门加载JSON文件。
有时我们希望能够在特定的情况再加载JS文件,而不是一开始把所有JS文件都加载了,这时就要使用$.getScript()方法。
Ajax.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<!-- <script type="text/javascript" src="test.js"></script> -->
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
test.js:
alert("我在被呼唤的情况下才被加载");
jQuery代码:
点击按钮后再加载JS文件:
$("input").click(function() {
$.getScript("test.js");
});
$.getJSON()方法是专门用于加载JSON文件的,使用方法和之前的类似。
test.json:
[
{
"url" : "www.ycku.com"
}
]
jQuery代码:
$("input").click(function() {
$.getJSON("test.json", function(response, status, xhr) {
alert(response[0].url);
});
});
$("input").click(function() {
$.getJSON("test.json", function(response, status, xhr) {
alert(response); //[object Object]
},"html");
});