ajax修改异步选定行,后台 ajax 异步修改示例

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

(1)首先 html 代码如下：

465

(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');

$('').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)下面就是写具体的程序处理文件了，这里就不再写下去了，主要是以上关键代码搞懂了，其实就没什么问题了。