jQuery生成一个DIV容器,ID是"rating".
我们需要一些服务器端代码,这个例子中用到了一个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".的更多相关文章
- 获取当前div中的所有div的个数和每一个div的ID and 根据屏幕分辨率计算高度
var tabs_Count=document.getElementById("tabs-panels").getElementsByTagName("div" ...
- 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据
使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...
- 采用PHP函数uniqid生成一个唯一的ID
http://www.daimajiayuan.com/sitejs-17815-1.html
- jQuery实现动态添加和删除一个div
本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> ...
- 【转】AngularJS动态生成div的ID
AngularJS动态生成div的ID 原文链接:http://blog.csdn.net/you23hai45/article/details/52348078 1.问题背景 给定一个数组对象,里面 ...
- 微信生成二维码 只需一个网址即刻 还有jquery生成二维码
<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...
- js生成一个不重复的ID的函数的进化之路
在MongoDB中的ObjectID,可以理解为是一个不会重复的ID,这里有个链接http://blog.csdn.net/xiamizy/article/details/41521025感兴趣可以去 ...
- [jQuery编程挑战]006 生成一个倒计时效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- Linux下的ssh远程访问
准备工作:首先需要在windows系统中安装虚拟机,并在虚拟机中安装好linux操作系统,这里安装的是vmware player虚拟机和ubuntu版本的操作系统.关于该部分的安装在作者的其他经验中有 ...
- opencv获取IP摄像头(IP-camera)实时视频流
之前这篇文章讲了如何通过网络摄像头(web camera)获取实时视频流,但是这种方法的缺陷就是摄像头和主机必须连在一起,那这种在室外部署的时候就会非常麻烦并且不安全,所以后来找了下用海康威视或者大华 ...
- [SLAM] Little about SLAM
Books from Zhihu: 幽默一把 看完Gonzalez:嗯,好像很好玩的样子,我也来搞一搞.看完Price:什么鬼,怎么这么多公式,公式看不懂肿么破.看完Szeliski:原来用一千页的书 ...
- Spring中可以复用的工具类&特性记录
Spring 里有用工具类: GenericTypeResolver 解析泛型类型.核心逻辑还是调用 ResolvableTypeResolvableType 解析泛型类型 BeanWrapper 利 ...
- Dubbo -- 系统学习 笔记 -- API参考手册
Dubbo -- 系统学习 笔记 -- 目录 API参考手册 配置API 注解API 模型API 上下文API 服务API API参考手册 Dubbo的常规功能,都保持零侵入,但有些功能不得不用API ...
- iOS开发-获取子视图坐标系中Point、Rect在父视图坐标系中的实际值
iOS提供了方法来完成上述值得转换 convertRect:toView:, convertRect:FromView: convertPoint:toView: and convertPoint:f ...
- 使用js是想防止表单重复提交的效果
直接上代码: <html> <head> <title>Form表单</title> <script type="text/javasc ...
- codeforces水题100道 第十六题 Codeforces Round #164 (Div. 2) A. Games (brute force)
题目链接:http://www.codeforces.com/problemset/problem/268/A题意:足球比赛中如果主场球队的主场球衣和客队的客队球衣颜色一样,那么要求主队穿上他们的可对 ...
- sklearn提供的自带的数据集
sklearn 的数据集有好多个种 自带的小数据集(packaged dataset):sklearn.datasets.load_<name> 可在线下载的数据集(Downloaded ...
- 【调试错误】找不到 System.Web.Mvc 引用
今天调试新项目,从svn上clone下来,发现运行不了. System.Web.Mvc 显示黄色叹号 解决方案如下: 安装一个 MVC 的插件.AspNetMVC2_VS2008.exe 下载地址:h ...