我们需要一些服务器端代码,这个例子中用到了一个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.de2881064151bewerten!"

更多的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”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

jQuery生成一个DIV容器,ID是"rating".的更多相关文章

  1. 获取当前div中的所有div的个数和每一个div的ID and 根据屏幕分辨率计算高度

    var tabs_Count=document.getElementById("tabs-panels").getElementsByTagName("div" ...

  2. 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

  3. 采用PHP函数uniqid生成一个唯一的ID

    http://www.daimajiayuan.com/sitejs-17815-1.html

  4. jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> ...

  5. 【转】AngularJS动态生成div的ID

    AngularJS动态生成div的ID 原文链接:http://blog.csdn.net/you23hai45/article/details/52348078 1.问题背景 给定一个数组对象,里面 ...

  6. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  7. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

  8. js生成一个不重复的ID的函数的进化之路

    在MongoDB中的ObjectID,可以理解为是一个不会重复的ID,这里有个链接http://blog.csdn.net/xiamizy/article/details/41521025感兴趣可以去 ...

  9. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Win7下telnet使用

    出于安全考虑,win7已经禁用了telnet这一功能, telnet是明文传输的,安全性很差. 知道了这一点就不奇怪为什么在win7下不能使用telnet了,下面就详细介绍下如何重新开启telnet服 ...

  2. springboot+swagger2案例

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  3. [SublimeText] Sublime Text 2 运行 Python 脚本中文路径解决方法

    在 SublimeText 中直接运行 Python 脚本,出现以下报错提示: Running python -u C:\Documents and Settings\Administrator\桌面 ...

  4. [NodeJS] Node.js 编码转换

    Node.js 自带的 toString() 方法不支持 gbk,因此中文转换的时候需要加载第三方库,推荐以下两个编码转换库,iconv-lite 和 encoding. iconv, iconv-l ...

  5. 执行Batch批处理遇到的问题

    1.务必关掉自动提交 增强执行效率 conn.setAutoCommit(false); 2.executeBatch失效问题 <1>务必将语句pstmt = conn.prepareSt ...

  6. Objective-c官方文档 怎么使用对象

    版权声明:原创作品,谢绝转载!否则将追究法律责任.   对象发送和接受消息 尽管有不同的方法来发送消息在对象之间,到目前位置是想中括号那样[obj doSomeThing]:左边是接受消息的接收器,右 ...

  7. 云计算设计模式(六)——命令和查询职责分离(CQRS)模式

    云计算设计模式(六)——命令和查询职责分离(CQRS)模式 隔离,通过使用不同的接口,从操作读取数据更新数据的操作.这种模式可以最大限度地提高性能,可扩展性和安全性;支持系统在通过较高的灵活性,时间的 ...

  8. 深入理解 Neutron -- OpenStack 网络实现(2):VLAN 模式

    问题导读 1.br-int.br-ethx的作用是什么?2.安全组策略是如何实现的?3.VLAN 模式与GRE模式有哪些不同点?流量上有哪些不同?4.L3 agent实现了什么功能? 接上篇深入理解 ...

  9. 题目1006:ZOJ问题(递推规律)

    题目链接:http://ac.jobdu.com/problem.php?pid=1006 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  10. openstack-networking-neutron(一)---端到端和点到点的理解

    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. ====本文目的===== 理解搞清楚两个概念: 1.端到端    2.点到点  ...