Rumah >hujung hadapan web >tutorial js >jquery ajax Klik dua kali div untuk terus mengubah suai kandungan dalam div_jquery
Baru-baru ini semasa saya melakukan pembangunan fungsi bahagian belakang, saya pernah mengubah suai medan pengisihan. Saya rasa sukar untuk memasuki semula halaman penyuntingan hanya untuk mengubah suai nilai pengisihan, jadi saya menemui beberapa maklumat dalam talian dan menulis jquery. pelaksanaan klik dua kali Kesan mengubah suai nilai pengisihan secara langsung:
kod html:
<div title="【双击可直接修改】" class="changeSort" id="{$id}">{$sort}</div>
Kod JS:
<script type="text/javascript"> //双击修改排序 $('.changeSort').dblclick(function(){ var url = "{:U('setSort')}"; var td = $(this); var id = td.attr('id'); var text = td.text(); var txt = $("<input type='text' class='input-small' >").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); }); </script>
Kod PHP:
<?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); } ?>
Kesannya adalah seperti berikut:
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.