jquery ajax雙擊div可直接修改div中的內容

發布于 2017-04-03 17:26:16 | 127 次閱讀 | 評論: 0 | 來源: 網友投遞

jQuery javascript框架jQuery是一個兼容多瀏覽器的javascript框架，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。

這篇文章主要介紹了jquery ajax雙擊div直接修改div中內容的相關方法，感興趣的小伙伴們可以參考一下

最近在做后臺功能開發的時候，用到對排序字段的修改，感覺只為了修改一個排序值，而要重新進入編輯頁比較麻煩，于是網上找點資料自己動手寫了一個jquery雙擊實現直接修改排序值的效果：

html代碼：

{$sort}

JS代碼：

//雙擊修改排序

$('.changeSort').dblclick(function(){

var url = "{:U('setSort')}";

var td = $(this);

var id = td.attr('id');

var text = td.text();

var txt = $("").val(text);

txt.blur(function(){

// 失去焦點，保存值。于服務器交互自己再寫,最好ajax

var newText = $(this).val();

$.ajax({

url:url,

type:'POST',

data:{'tid':id,'sort':newText},

dataType:'json',

success:function(res){

if(res.flag==1){

layer.msg(res.msg);

// 移除文本框,顯示新值

$(this).remove();

td.text(newText);

}else if(res.flag==3){

layer.msg(res.msg);

txt.val(newText);

}

}

});

});

td.text("");

td.append(txt);

});

PHP代碼：

/**

* ajax 設置排序值

*/

public function setSort(){

if(IS_POST){

$tid = I('post.tid');

$sort = I('post.sort');

if(!is_numeric($sort)){

$arr = array(

'flag'=>3,

'msg'=>'請輸入數字',

'link'=>'',

'content'=>''

);

$this->ajaxReturn($arr);

}

$data = array(

'id'=>$tid,

'sort'=>$sort

);

$this->mod_sort = M('Sort');

$res = $this->mod_sort->save($data);

if($res){

$arr = array(

'flag'=>1,

'msg'=>'排序值設置成功',

'link'=>'',

'content'=>''

);

}else{

$arr = array(

'flag'=>2,

'msg'=>'排序值設置失敗',

'link'=>'',

'content'=>''

);

}

}else{

$arr = array(

'flag'=>0,

'msg'=>'請求非法！',

'link'=>'',

'content'=>''

);

}

$this->ajaxReturn($arr);

}

?>

效果如下圖：

以上就是本文的全部內容，希望對大家的學習有所幫助。

相關閱讀:

jquery ajax雙擊div可直接修改div中的內容

jquery ezUI 雙擊行記錄彈窗查看明細的實現方法

jquery實現雙擊table通過ajax修改內容示例

jquery實現點擊文字可編輯并修改保存至數據庫

JQuery實現點擊div以外的位置隱藏該div窗口

jQuery 實現雙擊編輯表格功能

jQuery在頁面加載時動態修改圖片尺寸的方法

jQuery通過點擊行來刪除HTML表格行的實現示例

Jquery實現點擊按鈕,連續地向textarea中添加值的實例代碼

jQuery實現點擊文本框彈出熱門標簽的提示效果

jQuery Ajax向服務端傳遞數組參數值的實例代碼

基于jQuery替換table中的內容并顯示進度條的代碼

總結

以上是生活随笔為你收集整理的ajax点击更改div,jquery ajax双击div可直接修改div中的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。