后台 ajax 异步修改示例

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

（1）首先 html 代码如下：

<td>
<span class="editable" require="must" id="order143" url="http://www.maopiaopiao.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）下面就是写具体的程序处理文件了，这里就不再写下去了，主要是以上关键代码搞懂了，其实就没什么问题了。