jQuery起点教程之使用AJAX(4)

在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西(译Keel注:就是对某些东西投票),就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下rate.php代码.
虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating".

$(document).ready(function() {
        //
generate markup
        var ratingMarkup = ["lease rate: "];
    
   for(var i=1; i <= 5; i++) {
               
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a>
";
        }
        // add markup to container and applier click handlers
to anchors
        $("#rating").append( ratingMarkup.join('')
).find("a").click(function(e) {
                e.preventDefault();
    
           // send requests
                $.post("rate.php", {rating:
$(this).html()}, function(xml) {
                        // format
result
                        var result = [
                            
   "Thanks for rating, current average: ",
                            
   $("average", xml).text(),
                                ", number of
votes: ",
                                $("count", xml).text()
       
                ];
                        // output result
             
          $("#rating").html(result.join(''));
                } );
    
   });
});

这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。

如果你没有一个安装过PHP的webserver,你可以看看这个在线的例子.
不使用javascript实现的例子可以访问
softonic.de 点击 "Kurz bewerten!"

更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed
under
AJAX.

(译者注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)

一个在使用AJAX载入内容时经常发生的问题是:当载入一个事件句柄到一个HTML文档时,还需要在载入内容上应用这些事件,你不得不在内容加载完成后应用这些事件句柄,为了防止代码重复执行,你可能用到如下一个function:

$(function() {
        var
addClickHandlers = function() {
               
$("a.clickMeToLoadContent").click(function() {
                      
 $("#target").load(this.href, addClickHandlers);
                });
    
   };
    
   addClickHandlers();
});

现在,addClickHandlers只在DOM载入完成后执行一次,这是在用户每次点击具有clickMeToLoadContent
这个样式的链接并且内容加载完成后.

请注意addClickHandlers函数是作为一个局部变量定义的,而不是全局变量(如:function
addClickHandlers()
{...}),这样做是为了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法,简单的办法是将这个回调方法包含在一个其它的function中:

// get some data
var foobar = ...;
//
specify handler, it needs data as a paramter
var handler = function(data)
{
  ...
};
// add click handler and pass foobar!
$('a').click(
function(event) { handler(foobar); } );

// if you need the context of the
original handler, use apply:
$('a').click( function(event) {
handler.apply(this, [foobar]); }
);

用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

本章的相关链接:

时间: 2024-10-04 03:43:55

jQuery起点教程之使用AJAX(4)的相关文章

jQuery起点教程之使用选择器和事件(3)

jQuery起点教程之使用选择器和事件 jQuery提供两种方式来选择html的elements: 第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a")): 第二种是用jQuery对象的几个methods(方法).这两种方式还可以联合起来混合使用. 为了测试这些选择器,我们来试着在我们starterkit.html中选择并修改第一个ordered list. 一开始,我们需要选择这个list本身,这个list有一

jQuery起点教程之有序化插件实例(6)

jQuery起点教程之有序化插件实例是一篇使用jquery的tablesorter插件来实现一些功能效果的教程,大家可以认真学习一下.Sort me将我有序化:使用tablesorter插件进行表格排序. 这个表格排序插件能让我们在客户端按某一列进行排序,引入jQuery和这个插件的js文件,然后告诉插件你想要哪个表格拥有排序功能. 要测试这个例子,先在starterkit.html中加上像下面这一行的代码: <script src="lib/jquery.tablesorter.js&q

jQuery起点教程之安装(1)

jQuery入门指南教程这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识.它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX.FX的用法,以及如何制作jQuery的插件. 这个指南包括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果. 内容提要 安装 Hello jQuery Find me:使用选择器和事件 Rate me:使用AJAX Animate me(让我生动起来):使用FX Sort me(将我有序化):使用

jQuery起点教程之插件制作(7)

jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件. 为你的插件取一个名字,在这个例子里面我们叫它"foobar". 创建一个像这样的文件:jquery.[yourpluginname].j

jQuery中文入门指南,翻译加实例,jQuery的起点教程_基础知识

jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时

jQuery Mobile教程:自动增强的流程设计

文章简介:本文我们来深度认识一下jQuery Mobile中一个大致的自动增强的流程设计. 本文我们来深度认识一下jQuery Mobile中一个大致的自动增强的流程设计. 再直观地看看这个结构: <div data-role="page"> <div data-role="header"> <h1>我是header部分</h1> </div> <div data-role="content

jQuery Mobile教程:最简单的页面结构

文章简介:不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中,还是已经开始用它做项目的开发者,欢迎加入这个jqm学习之旅. 不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中,还是已经开始用它做项目的开发者,欢迎加入这个jqm学习之旅 1.什么是jQuery Mobile? 按照官方的描述:针对智能手机和平板.做过触摸优化的web框架.截止到编写这个教程的时候,目前最新的版本是1.3.0. 2.jQuery Mobile推崇什么? 其实很多读者

【推荐】10个既绚又实用的JQuery特效教程

导读:作者Aamir Baig在designersdare.com分享了一篇文章<10 Must See jQuery Latest Tutorials-Beginners and Advance Level>,文中对初学者和资深学者分别提供了不同级别的教程,使用JQuery做出的既炫丽又实用的效果,现将本文摘译,以下是文章内容: 此篇文章是JQuery高级教程,但对初学者学习JQuery也有一定的帮助. 首先让我们先对初学者谈谈如何开始学习JQuery.对于初学者学习JQuery来说是一个很

收集整理的10个优秀的jQuery幻灯片教程

文章简介:幻灯片也许是展示照片和图片的最佳方式了,几乎在所有的网站上都可以看到这类应用,使用jQuery可以快速的实现一些非常炫酷的幻灯片效果,下面向大家介绍国外10个优秀的jQuery幻灯片教程. 幻灯片也许是展示照片和图片的最佳方式了,几乎在所有的网站上都可以看到这类应用,使用jQuery可以快速的实现一些非常炫酷的幻灯片效果,下面向大家介绍国外10个优秀的jQuery幻灯片教程. Parallax Slider with jQuery Build a Simple Image Slides