jQuery 如何调用AJax(五种方法)方法一:load()
使用load方法可以帮助你加载非本地的HTML页面,并注入到当前调用的DOM中。
$.ajaxSetup({
cache: false
});
var ajax_load = "<img src='logo/.gif' alt='加载中...' />";
var loadUrl = "ajax/load.php";
$("#load_button").click(function() {
$("#result").html(ajax_load).load(loadUrl);
});
cache: false 的意思是让浏览器不执行缓存功能,这样的话页面的内容将实时更新,否则某些浏览器会出现内容不更新的问题,当点击按钮后,因为加载过程需要时间,所以这里我们先使用.html方法来添加一个”加载中”的图片,然后执行load方法。
高级使用方法:
1. 加载页面某一部分
例如只加载ID为”pic”的部分,代码如下:
$("#load_button").click(function() {
$("#result").html(ajax_load).load(loadUrl + " #pic");
});
2. 递交参数执行页面加载
可以给load方法添加GET或者POST参数,代码如下:
$("#load_get").click(function() {
$("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); });
$("#load_post").click(function() {
$("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); });
3. 添加回调函数
回调函数可以让你在结束AJAX调用后调用该函数,比如在页面load后提示用户加载完毕:
$("#load_callback").click(function() {
$("#result").html(ajax_load).load(loadUrl, null, function(responseText) { alert("Response:n" + responseText);
});
});
方法二:$.getJSON()
使用getJSON方法可以直接使用GET方法从远端得到JSON数据:
var jsonUrl = "ajax/json.php";
$("#getJSONForm").submit(function() {
var q = $("#q").val();
if (q.length === 0) {
$("#q").focus();
} else {
$("#result").html(ajax_load);
$.getJSON(jsonUrl, {q: q}, function(json) {
var result = "Language code is " + nguage; $("#result").html(result);
});
}
return false;
});
方法三:$.getScript()
使用getScript方法可以帮助你加载远程的Javascript:var scriptUrl = "ajax/script.php"; $("#getScript").click(function() {
$("#result").html(ajax_load);
$.getScript(scriptUrl, function() { $("#result").html("");
});
});
方法四:$.get()
$.get()方法比较常用,使用GET方式来请求资源。
它可以支持多种格式的响应,例如:XML、HTML、TEXT、Script、JSON和JSONP。
$("#get").click(function(){
$("#result").html(ajax_load);
$.get(loadUrl, {language: "php", version: 5},function(responseText){$("#result").html(responseText); },
"html"
);
});
方法五:$.post()
$.post()方法也比较常用,使用POST方式来请求资源。
它同样可以支持多种格式的响应,例如:XML、HTML、TEXT、Script、JSON和JSONP。