标签:
$.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()基本上一致,他们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。具体区别如下:
$.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"); });
标签:
原文地址:http://www.cnblogs.com/yerenyuan/p/5432556.html