Jquery Ajax PHP MySQL implémente la gestion des listes de classification (Partie 2)_jquery

Dans l'article précédent, nous avons expliqué en détail comment mettre en œuvre les opérations d'ajout et de suppression de la gestion des listes. On peut voir que la page front-end communique avec le backend via ajax et répond à l'opération interactive de la page front-end. basé sur les résultats du traitement en arrière-plan. Il s'agit d'un exemple très typique d'applications Ajax et JSON.
Cet article poursuivra l'exemple de l'article précédent et terminera l'opération d'édition.
Modifier les opérations sur les éléments
En cliquant sur le bouton « Modifier », l'élément correspondant passera immédiatement à l'état d'édition et une zone de saisie apparaîtra. L'utilisateur peut saisir à nouveau le nouveau contenu, puis cliquer sur le bouton « Enregistrer » pour terminer l'opération d'édition, ou cliquer sur. le bouton "Annuler" Annule l'état d'édition.
Tout d'abord, cliquez sur le bouton « Modifier » pour atteindre l'état d'édition et ajoutez le code suivant à $(function(){...}) dans 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); 
}); 

Comme le montre le code, le style de classe des boutons "Modifier" et "Supprimer" est en fait modifié, leur attribut de titre est modifié, puis le nom de la catégorie est enveloppé dans une zone de saisie (wrapInner) , générant ainsi l'entrée dans un état d'édition.
Pour soumettre le contenu modifié au traitement en arrière-plan, en cliquant sur le bouton "Enregistrer", les choses suivantes se produiront, veuillez consulter le 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; 
        } 
      } 
  }); 
}); 

En cliquant sur le bouton "Enregistrer" dans l'état d'édition, obtenez d'abord le contenu de la zone de saisie. Si aucun contenu n'est saisi, l'utilisateur est invité à saisir le contenu. Ensuite, le contenu saisi par l'utilisateur est codé d'échappement. et l'élément d'édition correspondant est également obtenu, soumettez le contenu d'entrée et l'ID en tant que paramètres à l'arrière-plan post.php via $.ajax pour le traitement et répondez aux informations renvoyées par l'arrière-plan. Si le retour est réussi, l'utilisateur. sera invité à « modifier avec succès » et le statut d'édition sera libéré. ​​Si le retour échoue, l'utilisateur sera invité à « Échec de l'opération ».
Le traitement post.php en arrière-plan des éléments d'édition est similaire à l'opération d'ajout de nouveaux éléments dans l'article précédent. Le code est le suivant :
.

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; 

L'extrait de code ci-dessus est ajouté à l'instruction switch de post.php. Le code reçoit les paramètres id et title du front-end, décode les paramètres de titre, puis met à jour les éléments correspondants dans la table de données et génère l'exécution. résultats à la réception.
Pour annuler l'état d'édition, exécutez le code suivant en cliquant sur "Annuler" :

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

En fait, le code réassemble une chaîne et remplace l'état édité par la chaîne assemblée, c'est-à-dire annule l'état d'édition.
Grâce à un tel cas d'application pratique, nous pouvons découvrir la supériorité de la technologie frontale. Chaque étape de l'opération effectuée par l'utilisateur est si conviviale, ce qui est un aspect de l'expérience utilisateur. La bibliothèque Jquery rend les opérations ajax si simples. Le code de cet article utilise également la méthode live de jquery, qui est nécessaire pour lier les éléments DOM créés dynamiquement.

Les deux articles ci-dessus représentent tout le contenu sur Jquery Ajax PHP MySQL implémentant la gestion de liste de catégories que l'éditeur a compilé pour vous. J'espère qu'il sera utile à votre étude.