利用ajax实现页面动态修改

　　实现页面动态修改信息。功能：在查询结果下，点击修改，需修改的地方从显示状态变为可编辑的状态，输入修改的值，通过ajax传输到后台进行更新，保存，显示更新后的值。若点修修改后不想修改了，则点击取消，返回不修改。下面介绍下实现的步骤：

1，动态遍历出的数据后面添加操作按钮，可以有删除啊，修改啊，本人是照片文件名列表，所以还有预览这一项。今天要实现的功能就是修改文件名。

2，遍历项包含标签<a onclick="change(this)" href="javascript:void(0);">修改</a>，点击后触发change方法.

3,

function change(obj){
/*
一：文件名变成文本框编辑
二：修改文件名变成两个按钮【保存，取消】
*/
//一
//获取<a>标签父亲父亲节点<td>的兄弟节点<td>
var p = $(obj).parent().parent().prev();
//获取<td>标签的属性值
var title = p.text();
//替换<td>标签
$(p).html("<input type='text' value='"+title+"'/>");
//二
//获得<a>标签所在的父亲父亲节点<td>
var o = $(obj).parent();
//获取
var updateNameA = $(o).html();
$(o).html("<input type=\"button\" value=\"保存\" onclick=\"saveData(this,'"+title+"');\"/><input type=\"button\" value=\"取消\" onclick=\"cancleEdit(this,'"+title+"')\" //>");
};

4，cancleEdit()方法代码----取消编辑

//取消编辑、恢复成原来
function cancleEdit(obj,data){
var p = $(obj).parent().parent().prev();
$(p).html(data);
var o = $(obj).parent();
$(o).html("<a onclick=\"change(this)\" href=\"javascript:void(0);\">修改文件名</a>");
}

5,saveData()方法代码-----保存数据

function saveData(obj, data) {
//获取修改后的值
var p = $(obj).parent().parent().prev().find("input").val();
var op = data;
var flag = 3;
//通过ajax处理
$.ajax({
url : "modNameAction",
type : "GET",
data : {
"p" : p,
"op" : op
},
dataType : "text",
success : function(data) {
//将返回的JSON字符串转换成JSON对象
var b = eval("(" + data + ")");
var c = b.url;
//对结果进行处理
if (c == "success") {
cancleEdit(obj, p);
} else {
alert("对不起，已存在相同名字的文件！");
}
}
});
}

 

 

 

 

1，熟练利用jquery选择器，以及熟练使用字符拼接。

2，.html（） 和.text（）方法的使用