首页 / 脚本样式 / JavaScript / JavaScript基于ajax编辑信息用法实例

// Requires prototype.jsfunction edit（action, obj） {Element.hide（obj）;var textarea ="<div id="" + obj.id + "_editor"><input type="text" id="" + obj.id + "_edit" name="" + obj.id + "" value="" + obj.innerHTML + "" size="40">";var button = "<input id="" + obj.id + "_save" type="button" value="SAVE" /> <input id="" + obj.id + "_cancel" type="button" value="CANCEL" /></div>";new Insertion.After（obj, textarea+button）;Event.observe（obj.id+"_save", "click", function（）{saveChanges（action, obj）}, false）;Event.observe（obj.id+"_cancel", "click", function（）{cleanUp（obj）}, false）;$（obj.id+"_edit"）.focus（）;$（obj.id+"_edit"）.select（）;}function cleanUp（obj, keepEditable） {Element.remove（obj.id+"_editor"）;Element.show（obj）;if（！keepEditable） showAsEditable（obj, true）;}function saveChanges（action, obj） {var new_content = escape（$F（obj.id+"_edit"））;obj.innerHTML = "Saving...";cleanUp（obj, true）;var success = function（t）{editComplete（t, obj）;}var failure = function（t）{editFailed（t, obj）;}var url = "poll-ajax.php?a="+action;var pars = "id=" + obj.id + "&content=" + new_content;var myAjax = new Ajax.Request（url, {method:"post", postBody:pars, onSuccess:success, onFailure:failure}）;}function editComplete（t, obj） {obj.innerHTML = t.responseText;showAsEditable（obj, true）;}function editFailed（t, obj） {obj.innerHTML = "Sorry, the update failed.";cleanUp（obj）;}