zoukankan      html  css  js  c++  java
  • 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”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

    本章的相关链接:
  • 相关阅读:
    Vue 错误:Avoid mutating a prop directly
    插入排序
    Vue2.0实现ie的兼容
    mysql8.0遇到删除外键的错误
    c# 根据父节点id,找到所有的子节点数据
    SSH原理与运用(一):远程登录
    Java线程:Timer和TimerTask
    linux系统判断是否重启、关机、查询登录诊断分析简介
    CS架构和BS架构的区别
    yum提示another app is currently holding the yum lock;waiting for it to exit
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1383954.html
Copyright © 2011-2022 走看看