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_12_执行模型浅析
Oct 18 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
Java模拟试题
2014/11/10 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
医学生求职自荐信
2013/10/25 职场文书
基层工作经验证明样本
2014/11/16 职场文书
库房管理员岗位职责
2015/02/12 职场文书
学生会工作感言
2015/08/07 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android