jQuery技术

jQuery ajax 例子

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

运用 jQuery 将使 Ajax 操作变得及其简单。jQuery 提供有一些非常有用函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。 Ajax 最常见的用法就是把一块 HTML 代码加载到页面

运用 jQuery 将使 Ajax 操作变得及其简单。jQuery 提供有一些非常有用函数,可以使简单的工作变得更加简单,复杂的工作变得不再复

杂。

Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用 load() 函数即可。下面是一个用于更新统计信息的示例:

$(

’#stats’).load(’stats.html’);

通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者

$.get(),这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。

清单 4. 使用 Ajax 向页面发送数据

$.post(’save.cgi’, {
text: ‘my string’,
number: 23
}, function() {
alert(’Your data has been saved.’);
});
如果您确实需要编写一些复杂的 Ajax 脚本,那

么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者

complete 回调函数,向用户提供更多有关 Ajax 体验的反馈。此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。清单 5 显示

了一个使用一些我所提到的参数检索 XML 文档的示例。

清单 5. $.ajax() 使 Ajax 由复杂变简单
$.ajax({
url: ‘document.xml’,
type: ‘GET’,
dataType:

‘xml’,
timeout: 1000,
error: function(){
alert(’Error loading XML document’);
},
success: function(xml){
// do something with xml
}
});
当 success

回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。清

单 6 显示了 success 函数的一个扩展,它为 XML 中的每个 元素都添加了一个列表项到 Web 页面中。

清单 6. 使用 jQuery 处理 XML 文档
success: function(xml){
$(xml).find(

’item’).each(function(){
var item_text = $(this).text();
$(’
‘)
.html(item_text)
.appendTo(’ol’);
});
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery视频教程

    jQuery视频教程

    2014-11-16 22:49

  • jQuery之ajax post篇

    jQuery之ajax post篇

    2014-11-16 22:49

  • jquery ajax Post Get 登录验证例子

    jquery ajax Post Get 登录验证例子

    2014-11-16 22:49

  • jQuery Ajax 开发入门教程

    jQuery Ajax 开发入门教程

    2014-11-16 22:49

网友点评