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 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
js性能优化技巧
Nov 29 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
摘自启点的main.js
2008/04/20 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python带参数打包exe及调用方式
2019/12/21 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python list的index()和find()的实现
2020/11/16 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
煤矿安全承诺书
2014/05/22 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
离婚协议书的范本
2015/01/27 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Python实现照片卡通化
2021/12/06 Python