本文实例讲述了javascript基于ajax编辑信息的方法。分享给大家供大家参考。具体如下:
// requires prototype.js function edit(action, obj) { element.hide(obj); var textarea ='<p 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" /></p>'; 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); }
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
怎样局部更新razor页面
ajax实现loading效果
以上就是js基于ajax操作信息的使用的详细内容。
