现在很多后台程序修改数据的方法很人性化，点击文字之后该文字就会被增加到一个文本输入框之内，当该输入框失去焦点后，输入框消失，文字状态还原，不过文字的内容却不声不响的被改变了。用过 ecshop ，ecmall 开源程序的朋友应该都知道。一直感觉这个功能很实用，下面是作者从一开源程序内提取出来的实现 ajax 异步修改内容的功能，仅将一些主要的地方贴出来，更深层次的，大家可自行扩展。

（1）首先 html 代码如下：

<td>
<span class="editable" require="must" id="order143" url="http://www.phpernote.com/?action=reOrder&order_id=">465</span>
</td>

（2）js 代码如下（这部分是关键代码）：

$('span[class="editable"]').click(function(){
    var s_value=$(this).text();
    var s_url=$(this).attr('url');
    var s_id=$(this).attr('id');
	var require=$(this).attr('require');
    $('<input type="text">').css({border:'1px solid #ccc',width:'80%',height:'20px'})
	.attr({value:s_value,size:5})
	.appendTo($(this).parent())
	.focus()
	.select()
	.keyup(function(event){
		if(event.keyCode==13){
			if(require=='must'){
				if($(this).val().length==0){
					alert('此处内容不能为空！');
				}
			}
		}
		$(this).prev('span').show().text($(this).attr('value'));
		$.ajax({
			type:'GET',
			url:s_url+encodeURI(s_value),
			cache:false,
			dataType:'json',
			success:function(data){
				if(data.code==='0'){
					$('#'+s_id).parent().remove();
					return;
				}else{
					alert(data.alerts);
				}
			}
		});
		$(this).remove();
	})
	.blur(function(){
		if(require=='must'){
			if($(this).val().length==0){
				alert('此处内容不能为空！');
			}
		}
		$(this).prev('span').show().text($(this).attr('value'));
		$.ajax({
			type:'GET',
			url:s_url+encodeURI(s_value),
			cache:false,
			dataType:'json',
			success:function(data){
				if(data.code==='0'){
					$('#'+s_id).parent().remove();
					return;
				}else{
					alert(data.alerts);
				}
			}
		});
		$(this).remove();
	});
	$(this).hide();
});

（3）下面就是写具体的程序处理文件了，这里就不再写下去了，主要是以上关键代码搞懂了，其实就没什么问题了。