您的位置：首页 > Web前端 > JQuery

jQuery类库新手使用指南之AJAX方法 - 第二部分

2012-03-19 11:24 936 查看

继续昨天的AJAX方法，今天我们将介绍另外几种常用AJAX请求方法：

使用$.post()方法来创建POST请求

和$.get() 方法类似，$.post()可以帮助你创建HTTP的POST请求。它的语法和$.get()方法非常类似，唯一的区别就在于POST使用HTTP POST方法来传递。如果你不清楚HTTP POST和GET的区别，简单来说，GET传递过程中的参数会直接附在URL上，并且发送的参数数据长度有限制。而POST则没有这些限制，比较典型的使用，例如，如果你使用表单开发登录窗口的话，最好使用POST，因为使用GET会泄露你的密码。$.post()的使用如下：

$.post( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" );

在前一篇文章中的演示，我们也可以使用$.post()方法来实现，如下：在线演示在上面我已经提到过，GET发送的数据长度有限制，所以，如果你需要发送很多的表单数据，$.post()方法就是你需要使用的方法。

使用load()方法来加载页面

使用JQuery的load()方法可以很容易的从服务器取得HTML的标签并且方便的插入当前的页面。如果你只是想加载页面内容到当前的页面，那么load()就是你需要使用的AJAX方法。

$('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html");

以上代码中，我们将加载http://www.gbin1.com/portfolio/lastest.html页面，并且将它的内容插入当前页面的id=gbElement元素中。是不是很简单？同时load方法也支持参数，如下：

var gbdata={category:"jquery"};
$('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html", gbdata);

以下是一个完整的load方法例子：

<html lang="en">
<head>
<title>Load GBin1 latest posts</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( function() {
$('#load').click( function() {
var data = { category: "root" };
$('#latest').load( "http://www.gbin1.com/portfolio/lastest.html", data );
} );
} );
</script>
</head>
<body>
<button id="load">Load latest Post</button>
<div id="latest"></div>
</body>
</html>

在线演示以上代码中，我们实现了如下功能：页面中包含了一个按钮和div层，这个div层用来显示加载的页面标签当按钮被点击后，将会加载gbin1最近的文章这里我们向url传递了参数category最后jQuery生成一个AJAX请求。并且将返回的页面内容插入id=”lastest"这个div中。load方法同样也包含一个callback方法，如果你需要加载后执行操作，你可以调用这个回调方法。同时，load方法还允许你只加载一个页面中的片段，也就是加载页面中的一个部分，比如，只加载页面中的id=“content“的div。那么你可以如下书写代码：

$('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html #content");

使用这个方法的好处在于你不需要加载整个页面，你可以只加载部分页面内容，这样不会打扰用户阅读，同时也方便你在当前页面中显示类似”加载中“的字样儿，提示用户正在加载页面。

使用$.getJSON()来取得JSON数据

这个方法可以非常方便的帮助你从服务器请求JSON数据。相当于使用$.get()方法并且数据格式参数为"JSON"。我们可以使用这个方法调用如下：

$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.getJSON( "siteinfo.txt", data, success );
} );

大家可以看到，这个例子中使用的方法和以下$.get()非常相似，除了不需要指定数据参数格式

$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.get( "siteinfo.txt", data, success, "json" );
} );

在线演示

使用$.getScript()方法来取得和运行Javascript代码

和$.getJSON()方法类似，$.getScript()是用来取得并且执行javascript脚本的简便方法。它和$.get()方法中设置数据参数为script一样。包含两个参数：javascript的URL一个可选的回调函数用来帮助你在加载完script后执行特定的功能这个方法对于动态的加载javascript类库非常有效，你可以在某些页面中需要调用某些js，而其它页面则不需要，通过调用这个方法，能够帮助你减少请求服务器的加载文件的次数，有效提高页面加载速度。这里我们使用这个例子，我们将显示网站信息的代码封装到一个js中，如下：

function showsite( siteData ) {
var result = "<li>Site Name:" + siteData.site + "</li>";
result += "<li>Creation Date:" + siteData.date + "</li>";
result += "<li>Site tag: "  + siteData.tag + "</li>";
result += "<li>Site pages: "  + siteData.pages + "</li>";
$("#result").html(result);
}

然后我们修改showSiteInfo.html，通过$.getScripts()来调用，如下：

<!doctype html>
<html lang="en">
<head>
<title>Site Info Demo for jQuery $.get()</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
#container{
padding: 100px;
font-size: 12px;
font-family: arial;
}
#result{
padding: 10px 0;
}
#result li{
padding: 10px 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( function() {
$.getScript( "showsite.js", function() {
$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.get( "siteinfo.txt", data, showsite, "json" );
} );
} );
} );
</script>
</head>
<body>
<div id="container">
<button id="showinfo">show info</button>
<ul id="result"></ul>
</body>
</div>
</html>

在线演示以上代码中，我们首先调用$.getScript()方法来加载和运行showsite.js，然后在get方法中调用这个回调函数。通过这个方法来将内容显示到对应的元素中。注意$.getScript()方法添加了一个随机的时间戳参数到字符串查询中，例如：?_=1330395371668来防止浏览器缓存javascript。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航