Jquery Ajax PHP MySQL implementiert die Klassifizierungslistenverwaltung (Teil 2)_jquery

Im vorherigen Artikel haben wir ausführlich erklärt, wie die Hinzufügungs- und Löschvorgänge der Listenverwaltung implementiert werden. Es ist ersichtlich, dass die Front-End-Seite über Ajax mit dem Backend kommuniziert und auf den interaktiven Vorgang der Front-End-Seite reagiert Basierend auf den Ergebnissen der Hintergrundverarbeitung. Dies ist ein sehr typisches Beispiel für Ajax- und JSON-Anwendungen.
In diesem Artikel wird das Beispiel im vorherigen Artikel fortgesetzt und der Bearbeitungsvorgang abgeschlossen.
Artikelvorgänge bearbeiten
Durch Klicken auf die Schaltfläche „Bearbeiten“ wechselt das entsprechende Element sofort in den Bearbeitungsstatus und es erscheint ein Eingabefeld. Der Benutzer kann neue Inhalte erneut eingeben und dann auf die Schaltfläche „Speichern“ klicken, um den Bearbeitungsvorgang abzuschließen die Schaltfläche „Abbrechen“ Bearbeitungsstatus aufheben.
Klicken Sie zunächst auf die Schaltfläche „Bearbeiten“, um den Bearbeitungsstatus zu erreichen, und fügen Sie den folgenden Code zu $(function(){...}) in global.js hinzu:

//编辑选项 
$(".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); 
}); 

Wie aus dem Code ersichtlich ist, wird der Klassenstil der Schaltflächen „Bearbeiten“ und „Löschen“ tatsächlich geändert, ihr Titelattribut wird geändert und dann wird der Kategoriename mit einem Eingabeeingabefeld (wrapInner) umschlossen. , wodurch ein Bearbeitungsstatus generiert wird.
Um den geänderten Inhalt an die Hintergrundverarbeitung zu senden, indem Sie auf die Schaltfläche „Speichern“ klicken, geschieht Folgendes, siehe Code:

//编辑处理 
$(".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; 
        } 
      } 
  }); 
}); 

Durch Klicken auf die Schaltfläche „Speichern“ erhalten Sie zunächst den Inhalt des Eingabefelds. Wenn kein Inhalt eingegeben wird, wird der Benutzer aufgefordert, den Inhalt einzugeben. und das entsprechende Bearbeitungselement wird ebenfalls abgerufen, der Eingabeinhalt und die ID werden als Parameter zur Verarbeitung an den Hintergrund post.php gesendet und auf die vom Hintergrund zurückgegebenen Informationen reagiert wird aufgefordert „Bearbeiten erfolgreich“ und der Bearbeitungsstatus wird freigegeben. Wenn die Rückgabe fehlschlägt, wird dem Benutzer die Meldung „Vorgang fehlgeschlagen“ angezeigt.
Die Hintergrundverarbeitung von post.php zum Bearbeiten von Elementen ähnelt dem Vorgang zum Hinzufügen neuer Elemente im vorherigen Artikel. Der Code lautet wie folgt:

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; 

Der obige Codeausschnitt wird der switch-Anweisung von post.php hinzugefügt. Der Code empfängt die ID- und Titelparameter vom Frontend, dekodiert die Titelparameter, aktualisiert dann die entsprechenden Elemente in der Datentabelle und gibt die Ausführung aus Ergebnisse an die Rezeption weitergeben.
Um den Bearbeitungsstatus abzubrechen, führen Sie den folgenden Code aus, indem Sie auf „Abbrechen“ klicken:

//取消编辑 
$(".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); 
}); 

Tatsächlich setzt der Code eine Zeichenfolge neu zusammen und ersetzt den bearbeiteten Status durch die zusammengesetzte Zeichenfolge, d. h. der Bearbeitungsstatus wird aufgehoben.
Durch einen solchen praktischen Anwendungsfall können wir die Überlegenheit der Front-End-Technologie erleben. Jeder Schritt des vom Benutzer ausgeführten Vorgangs ist so benutzerfreundlich, was ein Aspekt der Benutzererfahrung ist. Die JQuery-Bibliothek macht Ajax-Operationen so einfach. Der Code in diesem Artikel verwendet auch die Live-Methode von JQuery, die zum Binden dynamisch erstellter DOM-Elemente erforderlich ist.

Die beiden oben genannten Artikel enthalten den gesamten Inhalt über die Implementierung der Kategorielistenverwaltung durch Jquery Ajax PHP MySQL, den der Herausgeber für Sie zusammengestellt hat. Ich hoffe, dass er für Ihr Studium hilfreich sein wird.