jQuery 5种调用AJax的方法

jQuery 如何调用AJax（五种方法）方法一：load()

使用load方法可以帮助你加载非本地的HTML页面，并注入到当前调用的DOM中。

$.ajaxSetup({

cache: false

});

var ajax_load = "";

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