`

jQuery入门教程-15 Days of jQuery(Day 10) --- 使用jQuery Javascript 库实现“即点即改”的AJAX化

阅读更多
转载自网络
以前我在Quirksmode网站见过这种代码,后来又在24 Ways网站看到了一个更具Web 2.0风格的方案。这次我将为大家展示两种使用jQuery实现相同功能(甚至更好)的方法。

目标

一个用AJAX(或AHAH)技术设计的页面,访问者无需离开就可以在看到的(x)HTML 页面上编辑内容。

方案

点击需要编辑的文本,变幻出一个带有保存和取消按钮的textarea。修改的部分将通过AHAH传送至服务器端的一个PHP脚本文件,用来更新数据库(MySQL或普通文件)。

演示

AJAX式即点即改演示一

在这第一个演示中,我使用了一个id为“editinplace”的div元素。当鼠标划过这里时,背景颜色将变成浅黄色。点击文本将启动一些DOM操作,div元素被一个textarea元素取代–内中包含原先的文本。

点击保存按钮将向服务器端的PHP脚本文件发送新的HTML内容,并重新输出收到的新文本内容(通过 $_POST)。

在真实应用环境下,你还应当添加一个安全性检测,然后才能更新数据库并返回更新后的页面内容,同事告知jQuery执行成功的信息。

但在这个例子中,所有的修改都是成功的,发送给PHP脚本的信息将原封不动的返回到jQuery代码,显示到一个普通的警告窗口里。

解释

开头部分说了很多次了,如果你不想使用jQuery提供的document.ready函数,尽可以选择你自己中意的init()函数。

$(document).ready(function(){
setClickable();
});

页面上第一个被执行的就是这个setClickable()函数。它的任务就是做以下内容:

查找包含id为“editinplace”的div元素,然后告诉jQuery在这些div被点击时执行某些操作。

function setClickable() {
$('#editInPlace').click(function() {

读取div内部的HTML代码的任务将交给jQuery的html()函数来完成。这些HTML将会额外添加若干代码以组成textarea里的保存和取消按钮。

"var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
var revert = $(this).html();

同样还是这些在div内部找到的HTML代码将会赋值给一个叫做“revert”的变量。这个变量将用来在取消按钮被按下的事件中输出原始文本。

var revert = $(this).html();

jQuery的DOM函数“after”用来将新生的textarea HTML代码放置在我们指定的div元素后。我在后面紧跟着连锁上了一个remove()方法 来移除div元素以节省代码。

$(this).after(textarea+button).remove();

在使用jQuery的时候,我通过对象名来定位保存和取消按钮对象。我指示jQuery在任一按钮按下时触发最后一个函数“saveChanges”。我告诉了jQuery在div元素被点击时做什么事情,但我没有在最后加上省略号因为我希望在这个div操作语句后面连锁其他方法。

$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})

我再连锁了一个简单的mouseover和mouseout事件,告诉jQuery在鼠标指针掠过我们指定的div元素(id=editInPlace)的时候添加和移除一个对象。

.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};//end of function setClickable

函数“saveChanges”将以按钮对象做为第一个参数,而cancel参数则取两种值,false或者保存在revert变量中的html代码内容。

function saveChanges(obj, cancel) {

如果cancel为假,则函数将保存更改并使用html格式发送给服务器端的php脚本。我在这里使用了jQuery内置的一个DOM函数实现对textarea内容的提取操作:parent()和siblings()。

if(!cancel) {
var t = $(obj).parent().siblings(0).val();

DOM基础超出了本系列教程的范围,但在这个应用中我只是告诉了jQuery“对象(保存按钮)有一个父元素(div)。。。去找到它。那个元素拥有一个或多个DOM树同级对象。。。我只想找到其中的第一个。然后提取那个对象的所有内容。”

(稍等。。。如果你对DOM风格的代码不是很熟悉的话,前面我的注释可能并不好理解。我还是建议你之前google一下“DOM javascript”或者其他相关的信息。)

这些html赋值给了t变量,现在要通过POST方法把它发送给test2.php。

$.post("test2.php",{
content: t
},function(txt){
alert( txt);
});
}

如果cancel有一个值,那么必然是保存在revert变量中的原始html内容。所以,在这个时候我希望变量t变为原始html内容。

else {
var t = cancel;
}

下一步是通过jQuery提供的DOM函数放置一个新的div元素,id为“editInPlace”,在这之后包含了textarea元素。。。然后删除掉这个div元素。

$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()

在果壳中,这将告诉jQuery“在DOM树中上跃两次。将HTML代码附在到达位置的对象之后,然后移除那个对象。”

最后,我们再次调用setClickable函数并关闭saveChange()函数。重调setClickable()函数的含义是重新设置onMouseover,onMouseout,和onClick事件到初始状态。

setClickable();
}

第二个示例

第二个方法非常类似但也有点复杂。

示例二

没有用到庞大的单独div元素,这个示例将每个段落p标签变换成单独的可编辑区域。

这里的难度在于你如何在向服务器端脚本发送数据时指定正确的段落p标签。

在这里我通过为每个p标签编号并将这个编号一同发送给服务器端的php脚本的方式解决了问题。你会在alert窗口中看到php脚本是如何“知道”哪个p标签里的内容被修改的。

已知的问题

现实的应用中,你在使用类似的功能时首先需要验证更改的内容的合法性,然后才能将数据发送到服务器端。显然在这里我们刻意把这些内容忽略掉了。
分享到:
评论

相关推荐

    jQuery动画特效---精通JavaScript+jQuery

    JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通...第15课 - jQuery插件 - [精通JavaScript+jQuery]

    jQuery-ajax-用户名异步请求

    jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)

    jQuery-ajax-json实现自动轮播图.rar

    jQuery-ajax-json实现自动轮播图.rar

    jquery-ui-datepicker中文版

    jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...

    jquery-ui-1.11.2日期控件datepicker

    &lt;script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"&gt; &lt;script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-timepicker-zh-CN.js"&gt;&lt;/script&gt;

    jquery.unobtrusive-ajax.min.js

    Ajax.BeginForm 提交,需要引用此文件才会执行OnSuccess

    jquery-uijquery-ui-1.7.3.custom.zip

    jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui

    jQuery入门---快速的,简洁的javaScript库

    jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

    Ajax-jquery-ajax-cache.zip

    Ajax-jquery-ajax-cache.zip,jquery插件,用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。

    jquery.datepicker-zh-CN.js

    &lt;script src="./public/js/jquery-ui-1.10.3.min.js"&gt; &lt;script src="./public/js/jquery.datepicker-zh-CN.js"&gt;&lt;/script&gt; &lt;link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"&gt; $( "#...

    jQuery版本迁移辅助插件jquery-migrate-1.2.1.min.js

    jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js

    Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip

    Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip,这个应用程序表示使用codeigniter php框架、jquery和ajax的在线聊天。我还添加了表示用于测试应用程序的数据库的sql文件。只有首先导入数据库(chat.sql),...

    jquery插件jquery-ui-1.8.2.custom.min.js

    jquery插件jquery-ui-1.8.2.custom.min.js

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jQuery入门---设计思想

    jQuery入门级---经典课程,详细讲述了jQuery的编写,适合零基础初学者,更适合培训没学明白的学生

    jquery.ajax-combobox, jQuery插件,创建一个文本框,可以以自动完成并下拉选择.zip

    jquery.ajax-combobox, jQuery插件,创建一个文本框,可以以自动完成并下拉选择 jquery.ajax-combobox 可以自动完成和pull-down-select的文本框的jQuery插件。 演示http://www.usamimi.info/~sutara/ajax-combobox

    Jquery智能提示完整全部版本vsdoc.js

    jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...

    Ajax-laravel-jquery-ajax-crud.zip

    Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统.zip

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...

Global site tag (gtag.js) - Google Analytics