Heim > Web-Frontend > js-Tutorial > jQuery-Ajax-Methode zum Ändern von Inhalten mit Mausklick_jquery

jQuery-Ajax-Methode zum Ändern von Inhalten mit Mausklick_jquery

WBOY
Freigeben: 2016-05-16 16:43:07
Original
1269 Leute haben es durchsucht

Der Code für eine Zeile in einer vorhandenen Tabelle sieht folgendermaßen aus:

<tr>
 <td><span class="catid">2</span></td>
 <td>公司介绍</td>
 <td>内部栏目</td>
 <td><span class="listorder" title="点击修改">2</span></td>
</tr>
Nach dem Login kopieren

Die Idee, Inhalte per Mausklick zu ändern, ist wie folgt:

1. Klicken Sie auf die Zahl in der Spaltensortierungsspalte, um den Inhalt in der ersten Spalte derselben Zeile abzurufen, d. h. die Spalten-ID
2. Verstecken Sie die Zahlen in der Spaltensortierung
3. Fügen Sie ein Eingabefeld in die Spaltensortierungsspalte ein, zeigen Sie den Inhalt in der Spaltensortierung im Eingabefeld an und setzen Sie ihn als Fokus
4. Ändern Sie den Inhalt der Eingabe, senden Sie die Daten, wenn der Fokus verloren geht, und übertragen Sie die Daten mit Ajax an den Server. Die Methode ist die Post-Methode
5. Beim Absenden der Daten erscheint eine freundliche Erinnerung, dass die Daten geändert werden. . . Oder warte auf das Bild
6. Geben Sie die Erfolgsmeldung zurück und zeigen Sie den geänderten Inhalt erneut an. Entfernen Sie das Eingabefeld

Der JQuery-Kerncode, der diese Funktion implementiert, lautet wie folgt:

$('.listorder').click(function(e){
 var catid = $(this).parent().siblings("td:eq(0)").text();//获取同一行上 第一列中的id值
 var listorder_now_text = $(this).text();//获取listorder中的内容 先保存起来
 $(this).text("");//设置内容为空
 var list_form = '<input type="text"  value="'+listorder_now_text+'" size=2 class="listorder_input" />' ;
 $(this).parent().append(list_form); //插入 input框
 $(".listorder_input").focus();
//自定义一个div 提示修改中
 var loading = '<div id="loading"><img src="img/loading.gif" alt="修改中..."/></div>';
 $(this).parent().append(loading);
 $('#loading')
  .css({
   "color" : "red" ,
   "display" : "none"
  })
//定义ajax的全局事件
 $(this).ajaxStart(function(){
  $('#loading').show();
 })
 $(this).ajaxStop(function(){
  $('#loading').remove();
 })
 $(".listorder_input").blur(function(){
  var thislist = $(this).siblings(); //取得同级的标签 即 修改后需要显示的 listorder
  $.post("ajax.php",{
  action : "mod_listorder",
  catid : catid ,
  listorder : $(this).attr("value")
  } , function(data, textStatus){
    $(thislist).text(data);
    }
  );//end .post
  $(this).remove();
 })//end function blur
})// end function click
Nach dem Login kopieren

Der Inhalt in ajax.php ist einfach. Er dient nur der Verarbeitung und Demonstration und es werden keine Daten an den Server übermittelt. Der Code lautet wie folgt:

sleep(1);//延时运行1秒,查看效果用,实际代码中不需要
echo $_POST['listorder'];
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage