JavaScript基于ajax编辑信息用法实例


Posted in Javascript onJuly 15, 2015

本文实例讲述了JavaScript基于ajax编辑信息的方法。分享给大家供大家参考。具体如下:

// Requires prototype.js
function 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);
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 #Javascript
jQuery简单实现验证邮箱格式
Jul 15 #Javascript
JavaScript截断字符串的方法
Jul 15 #Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 #Javascript
jQuery实现提示密码强度的代码
Jul 15 #Javascript
浅谈javascript中return语句
Jul 15 #Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 #Javascript
You might like
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
解读! Python在人工智能中的作用
2017/11/14 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Django REST 异常处理详解
2020/07/15 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
大学生自我鉴定范文模板
2014/01/21 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
营销总监岗位职责
2014/09/16 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
先进班集体申报材料
2014/12/26 职场文书
医学生自荐信范文
2015/03/05 职场文书
六年级语文教学反思
2016/03/03 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python