初学Ajax(二)

时间:2024-07-31 18:34:56

$.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()基本上一致,他们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。具体区别如下:

  1. GET请求是通过URL提交的,而POST请求则是HTTP消息实体提交的
  2. GET提交有大小限制(2KB),而POST方式不受限制
  3. GET方式会被缓存下来,可能有安全性问题,而POST没有这个问题
  4. 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");
});