jQuery 实例
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
在这一小节,我们将使用 jQuery 开发一个简单的 todo 管理器 jqtodo。jqtodo 使用httpd+php 脚本作为后台,数据库使用小巧的 sqlite。jqtodo 简单到仅支持新建一个 todo 及对之前所有 todo 的查询操作。页面布局上,有一个输入框和一个按钮,用户在输入框中填写待办事项,然后点击按钮,即 可将这条待办事项添加到数据库中,并同时将页面的待办事项列表更新:
简单起见,这里没有对用户的输入做任何校验,如果插入成功,则展示在列表中:
我们需要用 jQuery 做的事情如下:
- 当点击additem时,将文本框中的内容取出,并发送给服务器
- 当服务器完成并响应时,我们需要及时的更新列表
- 当用户首次进入此页面时,需要将历史中的待办事项列出来
在页面上定义一个 div,其 id 为 itemlist,则当进入页面时,可以通过 jQuery.ajax 来获 取数据库信息,并填充页面:
var list = $("div#itemlist");
$.ajax({
url : 'queryitems.php',
type : 'GET',
error : function(xhr){
alert(xhr);
},
success : function(obj){
obj = eval('('+obj+')');
var dataset = obj.dataset;
for(var i = 0; i < dataset.length; i++){
var current = dataset[i];
var newitem = $("<div></div>").text(current.desc)
.attr({
"id" : current.itemid,
"time" : current.ctime
})
.addClass("item");
newitem.appendTo(list);
}
}
});
后台提供一个queryitems.php的页面,该页面负责查询数据库,并将结构及作为json数 组的格式返回,并将数据集存放在”dataset”属性中,当成功时,我们可以遍历这个数组,并动态的创建条目,为条目添加属性及 CSS 类,最后将其添加到 id 为 itemlist 的 div 上 展现。
类似的,页面上有一个 id 为 add 的按钮,单击该按钮将触发以下事件:
$("input#add").click(function(){
var item = $("input#item").val();
if(!item || item.length == 0){
alert("please set the item description");
return false; }else{
additem(item);
}
});
首先获取文本框中的字符串,并做一下简单的非空校验。通过校验后则调用 additem 函数进行查询及页面更新:
function additem(item){
var dat = "item="+item;
$.ajax({
url : 'additem.php',
type : 'POST',
dataType : 'text',
data : dat,
error : function(xhr){
alert(xhr);
},
success : function(obj){
obj = eval('('+obj+')');
var newitem = $("<div></div>").text(obj.desc)
.attr({
"time" : obj.ctime
})
.addClass("item");
newitem.appendTo(list);
}
});
}
在这个函数中,只是简单的组织了需要 POST 的数据,然后使用 jQuery.ajax 异步的更新 页面中的待办事项列表。
使用 jQuery,可以在很短小的代码量中完成很多工作,一般而言,简洁的代码更容易维护和扩展。哪怕仅仅只是从代码的可读性和美学的意义上来讲,jQuery 也非常值得一试。
在线练习
{$ activeFileHint $}