<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<link href="task.css" type="text/css" rel="stylesheet">
<title>个人任务管理</title>
<script type="text/javascript">
var currListId; //当前显示的任务列表
//登录系统
function login() {
var userName = $("#userName").val(); //获取用户名
var password = $("#password").val(); //获取密码
//当用户名和密码都非空时自动登录
if (userName != "" && password != "") {
$.post("taskservice.jsp", //服务器页面地址
{
action: "login", //action参数
userName: userName, //用户名参数
password: password //密码参数
},
function(result) {
//如果结果的首字符为1，表示登录成功
if (result.substr(0,1) == "1") {
$("#userName").val(""); //清空userName文本框
$("#password").val(""); //清空password文本框
$("#login").hide(); //隐藏登录区域
$("#taskContainer").show(); //显示任务管理区域
getLists(); //获取任务列表
$("#loginInfo").html(result.substr(1)).show(); //显示登录用户信息
} else {
alert(result.substr(1)); //提示登录错误信息
}
}
);
} else {
alert("用户名和密码必须填写完整后才可以登录。");
}
}
//获取任务列表
function getLists() {
$.getJSON("taskservice.jsp", //服务器页面地址
{
action: "getLists" //action参数
},
function(json) { //回调函数
$("#lists").empty(); //清空现有列表
$(json).each(function(i) { //遍历结果数组
//创建任务列表项容器div
var box = $(document.createElement("div"));
box.addClass("box");
box.append("·");
//创建任务列表项span
var spanNode = $(document.createElement("span"));
spanNode.id("list" + json[i].id); //设置任务id
spanNode.addClass("pointer"); //增加class样式
spanNode.addClass("list"); //增加class样式
spanNode.click(function(){ //设置鼠标点击响应函数
getTasks(json[i].id); //鼠标点击后获取列表内任务
});
spanNode.html(json[i].name); //设置显示的任务列表项名称
box.append(spanNode); //将任务列表项追加到容器中
//在任务列表项容器中继续追加DEL操作span
$(box).append("<span class='operation pointer' onclick='delList(" + json[i].id + ")'>[ DEL ]</span>");
//在任务列表项容器中继续追加EDIT操作span
$(box).append("<span class='operation pointer' onclick='editList(" + json[i].id + ")'>[ EDIT ]</span>");
$("#lists").append(box); //将任务列表项容器加入到列表中
});
//在列表中追加添加新列表表单
$("#lists").append("<div><input type='text' id='newListName'></div>");
$("#lists").append("<div><input type='button' value='添加新列表' onclick='addNewList()'></div>");
}
);
}
//获取列表中的所有任务
function getTasks(listId) {
$.getJSON("taskservice.jsp", //服务器页面地址
{
action: "getTasks", //action参数
listId: listId //列表id参数
},
function(json) { //回调函数
$("#tasks").empty(); //清空当前任务
$("#currentList").html($("#list" + listId).html()); //显示任务列表名称
currListId = listId; //设置当前任务列表编号
$(json).each(function(i) { //遍历结果数组
//创建任务容器div
var box = $(document.createElement("div"));
box.addClass("box");
box.append("·");
//创建任务span
var spanNode = $(document.createElement("span"));
spanNode.id("task" + json[i].id); //设置任务id
spanNode.addClass("pointer"); //增加class样式
spanNode.addClass("task"); //增加class样式
spanNode.addClass("status" + json[i].status); //增加状态样式
spanNode.click(function() { //设置鼠标点击响应函数
changeTaskStatus(json[i].id) //鼠标点击后改变任务状态
});
spanNode.html(json[i].name); //设置显示的任务名称
box.append(spanNode); //将任务追加到容器中
//在任务容器中继续追加DEL操作span
$(box).append("<span class='operation pointer' onclick='delTask(" + json[i].id + ")'>[ DEL ]</span>");
//在任务容器中继续追加DEL操作span
$(box).append("<span class='operation pointer' onclick='editTask(" + json[i].id + ")'>[ EDIT ]</span>");
$("#tasks").append(box); //将任务容器加入到列表中
});
//在任务最后追加添加新任务表单
$("#tasks").append("<div><input type='text' id='newTaskName'></div>");
$("#tasks").append("<div><input type='button' value='添加新任务' onclick='addNewTask()'></div>");
}
);
}
//改变任务状态
function changeTaskStatus(taskId) {
var taskNode = $("#task" + taskId); //获取任务节点
//根据当前状态改变为相反状态并提交服务器修改数据库
if (taskNode.attr("class").indexOf("status0") != -1) {
taskNode.removeClass("status0"); //取消原有class样式
taskNode.addClass("status1"); //设置新class样式
$.post("taskservice.jsp", //服务器目标页面
{
action: "changeTaskStatus", //action参数
taskId: taskId, //任务编号参数
status: 1 //目标状态
},
function(result) { //回调函数
displayStatus(result); //显示操作结果
}
);
} else {
taskNode.removeClass("status1"); //取消原有class样式
taskNode.addClass("status0"); //设置新class样式
$.post("taskservice.jsp", //服务器目标页面
{
action: "changeTaskStatus", //action参数
taskId: taskId, //任务编号参数
status: 0 //目标状态
},
function(result) { //回调函数
displayStatus(result); //显示操作结果
}
);
}
}
//添加新任务列表
function addNewList() {
var listName = $("#newListName").val(); //获取列表名称
//进行列表名称的非空判断
if
ajax 经典案例源码(Jsp)
5星 · 超过95%的资源 需积分: 9 123 浏览量
2008-10-31
22:03:38
上传
评论 1
收藏 3.74MB RAR 举报 
ajax 经典案例源码(Jsp) （187个子文件） 
DBUtils.class 2KB Product.class 2KB ShoppingCart.class 2KB UploadListener.class 2KB UploadInfo.class 1KB MonitoredDiskFileItemFactory.class 1KB MonitoredOutputStream.class 1KB XMLUtils.class 1KB MonitoredDiskFileItem.class 1KB UploadMonitor.class 981B OutputStreamListener.class 237B thickbox.css 3KB bbs.css 1KB address.css 1KB task.css 1KB tree.css 613B tree.css 463B
loadingAnimation.gif 7KB title.gif 3KB rating.gif 725B insert.gif 111B
task.html 16KB calendar.html 13KB index.html 13KB address.html 10KB calc.html 8KB query_step.html 6KB word_guess.html 6KB wishes.html 6KB auto_login.html 5KB slideshow.html 5KB suggest.html 5KB chatroom.html 5KB word_tip.html 5KB select_menu.html 5KB menu.html 5KB slider.html 4KB auto_save.html 4KB online_dict.html 4KB album.html 3KB stock.html 3KB quick_search.html 3KB read_rss.html 3KB server_test.html 3KB tab_page.html 3KB read_source.html 3KB thickbox.html 3KB register.html 2KB postalcode.html 2KB mail_list.html 2KB server_time.html 2KB spell_check.html 2KB google_ajax_search.html 2KB upload.html 2KB explain.html 1KB intro.html 659B index.html 617B amazon.html 426B tree.html 410B page1.html 284B test1.html 151B sample.html 73B
mysql-connector-java-5.0.4-bin.jar 484KB dom4j-1.6.1.jar 307KB commons-httpclient-3.0.1.jar 273KB jaxen-1.1-beta-6.jar 239KB dwr.jar 181KB commons-io.jar 60KB commons-logging.jar 52KB commons-codec-1.3.jar 46KB commons-fileupload.jar 31KB json_simple.jar 14KB
pic004.jpg 186KB pic004.jpg 186KB pic004.jpg 186KB pic005.jpg 147KB pic005.jpg 147KB pic005.jpg 147KB pic002.jpg 132KB pic002.jpg 132KB pic002.jpg 132KB pic001.jpg 102KB pic001.jpg 102KB pic001.jpg 102KB pic003.jpg 81KB pic003.jpg 81KB pic003.jpg 81KB preview_pic005.jpg 8KB preview_pic005.jpg 8KB preview_pic004.jpg 7KB preview_pic004.jpg 7KB preview_pic002.jpg 7KB preview_pic002.jpg 7KB preview_pic001.jpg 7KB preview_pic001.jpg 7KB preview_pic003.jpg 6KB preview_pic003.jpg 6KB rico.js 88KB jquery.js 48KB prototype.js 46KB共 187 条
- 1
- 2
资源评论
zhuxiaolin08222013-05-23讲解很详细，很不错的资料，找了好久终于找到了- ybc771072014-03-05很好用啊，很正确
sandy88772012-07-18适合初学者，资料是不错的。
jiangpandubu032012-03-25终于找到了，以前看过这本书，想找源码再看看，在工程中用的到，终于找到了，初学ajax的人可以看看学习一下
