Jquery Ajax PHP MySQL melaksanakan pengurusan senarai klasifikasi (Bahagian 2)_jquery

Dalam artikel sebelum ini, kami menerangkan secara terperinci cara melaksanakan operasi penambahan dan pemadaman pengurusan senarai Ia dapat dilihat bahawa halaman hujung hadapan berkomunikasi dengan bahagian belakang melalui ajax dan bertindak balas kepada operasi interaktif halaman hujung hadapan. berdasarkan hasil pemprosesan latar belakang Ini adalah Contoh aplikasi Ajax dan JSON yang sangat tipikal.
Artikel ini akan meneruskan contoh dalam artikel sebelumnya dan menyelesaikan operasi penyuntingan.
Edit operasi item
Dengan mengklik butang "Edit", item yang sepadan akan segera bertukar kepada keadaan penyuntingan, dan kotak input akan muncul. Pengguna boleh memasukkan semula kandungan baharu, kemudian klik butang "Simpan" untuk menyelesaikan operasi penyuntingan, atau klik butang "Batal" Batalkan status penyuntingan.
Mula-mula, klik butang "Edit" untuk mencapai keadaan pengeditan, dan tambahkan kod berikut pada $(function(){...}) dalam global.js:

//编辑选项 
$(".edit").live('click',function(){ 
  $(this).removeClass('edit').addClass('oks').attr('title','保存'); 
  $(this).prev().removeClass('del').addClass('cancer').attr('title','取消'); 
  var str = $(this).parent().text(); 
  var input = "<input type='text' class='input' value='"+str+"' />"; 
  $(this).next().wrapInner(input); 
}); 

Seperti yang dapat dilihat daripada kod, gaya kelas butang "Edit" dan butang "Padam" sebenarnya ditukar, atribut tajuknya diubah suai, dan kemudian nama kategori dibalut dengan kotak input input (wrapInner) , dengan itu menjana Memasuki keadaan penyuntingan.
Untuk menyerahkan kandungan yang diubah suai kepada pemprosesan latar belakang, dengan mengklik butang "Simpan", perkara berikut akan berlaku, sila lihat kod:

//编辑处理 
$(".oks").live('click',function(){ 
  var input_str = $(this).parent().find('input').val(); 
  if(input_str==""){ 
    jNotify("请输入类别名称!"); 
    return false; 
  } 
  var str = escape(input_str); 
  var id = $(this).parent().attr("rel"); 
  var URL = "post.php?action=edit"; 
     
  var btn = $(this); 
  $.ajax({ 
      type: "POST", 
      url: URL, 
      data: "title="+str+"&id="+id, 
      success: function(msg){ 
        if(msg==1){ 
          jSuccess("编辑成功!"); 
          var strs = "<span class='del' title='删除'></span><span class='edit' 
          title='编辑'></span><span class='txt'>"+input_str+"</span>; 
          btn.parent().html(strs); 
        }else{ 
          jNotify("操作失败!"); 
          return false; 
        } 
      } 
  }); 
}); 

Dengan mengklik butang "Simpan" dalam keadaan pengeditan, mula-mula dapatkan kandungan kotak input Jika tiada kandungan dimasukkan, pengguna digesa untuk memasukkan kandungan Kemudian kandungan yang dimasukkan oleh pengguna dikodkan. dan item edit yang sepadan juga diperolehi, serahkan kandungan input dan ID sebagai parameter ke post.php latar belakang melalui $.ajax untuk diproses, dan membalas maklumat yang dikembalikan oleh latar belakang akan digesa untuk "berjaya mengedit" dan status pengeditan akan dikeluarkan Jika pemulangan gagal, , pengguna akan digesa dengan "Operasi gagal".
Pemprosesan post.php latar belakang bagi menyunting item adalah serupa dengan operasi menambah item baru dalam artikel sebelumnya Kodnya adalah seperti berikut:

case 'edit': //编辑项 
  $id = $_POST['id']; 
  $title = uniDecode($_POST['title'],'utf-8'); 
  $title = htmlspecialchars($title,ENT_QUOTES); 
  $query = mysql_query("update catalist set title='$title' where cid='$id'"); 
  if($query){ 
    echo '1'; 
  }else{ 
    echo '2'; 
  } 
  break; 

Coretan kod di atas ditambahkan pada pernyataan suis post.php Kod menerima parameter id dan tajuk dari bahagian hadapan, menyahkod parameter tajuk, kemudian mengemas kini item yang sepadan dalam jadual data dan mengeluarkan pelaksanaan. keputusan ke kaunter penerimaan tetamu.
Untuk membatalkan keadaan pengeditan, laksanakan kod berikut dengan mengklik "Batal":

//取消编辑 
$(".cancer").live('click',function(){ 
  var li = $(this).parent().html(); 
  var str_1 = $(this).parent().find('input').val(); 
  var strs = "<span class='del' title='删除'></span><span class='edit' title='编辑'> 
  </span><span class='txt'>"+str_1+"</span>"; 
  $(this).parent().html(strs); 
}); 

Malah, kod itu memasang semula rentetan dan menggantikan keadaan yang diedit dengan rentetan yang dipasang, iaitu membatalkan keadaan penyuntingan.
Melalui kes aplikasi praktikal sebegitu, kami boleh mengalami keunggulan teknologi bahagian hadapan Setiap langkah operasi yang diselesaikan oleh pengguna adalah begitu mesra, yang merupakan aspek pengalaman pengguna. Pustaka Jquery menjadikan operasi ajax begitu mudah Kod dalam artikel ini juga menggunakan kaedah langsung jquery, yang diperlukan untuk mengikat elemen DOM yang dibuat secara dinamik.

Dua artikel di atas adalah semua kandungan tentang Jquery Ajax PHP MySQL melaksanakan pengurusan senarai kategori yang telah disusun oleh editor untuk anda.