首页 > Other > 如何使用jQuery来实现AJAX调用

如何使用jQuery来实现AJAX调用

AJAX调用在jQuery中有几种不同的方法,这篇文章中我们将介绍几种不同的方式来实现ajax调用,如下你不清楚什么是ajax的话,请参考相关文章。简单来说AJAX是异步Javascript和XML(Asynchronous Javascript And XML)的缩写。目的是为了在页面中只刷新部分内容。比较大家可能比较常用的Google email或者是GBin1.com中的站内搜索都是典型的AJAX使用案例。

方法1:load()

使用load方法可以帮助你家在一个非本地的HTML页面,并且注入到当前调用的DOM中。使用jQUery你可以很方便的执行这个功能。

代码片段:

$.ajaxSetup ({
cache: false
});
var ajax_load = “<img src=”logo/gbin1loading.gif” alt=’加载中…’ />”;
// load()函数
var loadUrl = “ajax/load.php”;
$(“#load_button”).click(function(){
$(“#result”).html(ajax_load).load(loadUrl);
});

cache: false意思是让浏览器不执行缓存功能,这样的话页面的内容将实时更新,否则某些浏览器会出现内容不更新的问题

当点击按钮后,因为加载过程需要时间,所以这里我们先使用.html方法来添加一个”加载中”的icon,然后执行load方法。

高级使用:

a. 加载页面某一部分

我们可以使用load方法限制加载的部分,比较只加载ID=”section”的页面部分,代码如下:

$("#load_button").click(function(){ $("#result") .html(ajax_load) .load(loadUrl + " #section"); }); 

b. 递交参数执行页面加载

我们可以给load方法添加GET或者POST参数,如下:

$("#load_get").click(function(){ $("#result") .html(ajax_load) .load(loadUrl, "page=0&pagesize=10"); }); $("#load_post").click(function(){ $("#result") .html(ajax_load) .load(loadUrl, {page: 0, pagesize: 10}); }); 

c. 添加回调函数

回调函数可以帮助你在结束AJAX调用后添加更多方法,比如你需要在页面load后提示用户加载完毕,那么你可以使用这个功能:

$("#load_callback").click(function(){ $("#result") .html(ajax_load) .load(loadUrl, null, function(responseText){ alert("Response:n" + responseText); }); }); 

方法2:$.getJSON()

首先解释一下JSON,JSON是Javascript Object Notation的缩写。主要用来做数据交换的格式。

使用getJSON方法我们可以直接使用GET方法从远端得到JSON数据。

// $.getJSON() 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 "<strong>" + json.responseData.language + """; $("#result").html(result); } ); } return false; }); 

方法3:$.getScript()

getScript方法可以帮助你加载远程的Javascript,代码如下:

// $.getScript() var scriptUrl = "ajax/script.php"; $("#getScript").click(function(){ $("#result").html(ajax_load); $.getScript(scriptUrl, function(){ $("#result").html(""); }); }); 

方法4:$.get()

get()方法是比较常用的用来执行GET请求的jQuery方法。它可以支持多种格式的响应,例如,XML,HTML,TEXT,Script,JSON以及JSONP。

代码如下:

// $.get() $("#get").click(function(){ $("#result").html(ajax_load); $.get( loadUrl, {language: "php", version: 5}, function(responseText){ $("#result").html(responseText); }, "html" ); }); 

方法5:$.post()

和get()方法类似,post()方法用来使用POST来请求资源。

// $.post() $("#post").click(function(){ $("#result").html(ajax_load); $.post( loadUrl, {language: "php", version: 5}, function(responseText){ $("#result").html(responseText); }, "html" ); }); 
分类:Other
  1. 还没有评论。
  1. No trackbacks yet.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: