Exemple d'ajax pour changer l'état et supprimer sans rafraîchissement

1. 01.php est le programme principal, appelant le modèle smarty pour itérer et afficher :

<?php
  include './include/Mysql.class.php';
  include './libs/Smarty.class.php';
  $db=new Mysql;
  $smarty=new Smarty;
  $lists=$db->getALL('users');
  $smarty->assign('lists',$lists);
  $smarty->display('list.html');
?>

2. list.html modèle : contenu combiné avec JS AJAX :

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Tableau de présentation des droits d'utilisateur</title>/title>
</head>
<body>
    //Donner un div au corps du tableau pour faciliter l'appel JS
    <div id="table">
    <table align="center" border="1" width="500">
      <center><h2>Tableau des droits d'utilisateur</th>/h2></center>
      <tr>
        <th>uid</th>/th><th>Nom d'utilisateur</th>/th><th>Mot de passe</th>/th><th>État de verrouillage</th>/th><th>Rôle</th>/th><th>Opérations</th>/th>
      </tr>  
      {foreach $lists as $list}
        <tr align="center">
          <td>{$list.uid}</td>/td>
          <td>{$list.username}</td>/td>
          <td>{$list.password}</td>/td>
          {if $list.is_lock==1}
            <td><a href="javascript:lock(0,{$list.uid});" rel="external nofollow">verrouiller</a>/a></td>
            {else}
            <td><a href="javascript:lock(1,{$list.uid})" rel="external nofollow" ;>dés locker</a></td>  
          {/if}    
          {if $list.role==1}
              <td>Administrateur</td>
          {else}
              <td>Éditeur</td>    
          {/if}
          <td><a href="javascript:del({$list.uid})" rel="external nofollow" >supprimer</a></td>
        </tr>    
      {/foreach}  
    </table>
    </div>  
</body>
    <script type="text/javascript">
      function lock(lock,uid){
          //Créer un objet AJAX
          var xhr=new XMLHttpRequest();
          //Ouvrir un lien
          xhr.open('post','02.php');
          //Configurer les informations d'en-tête
          xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
          //取值,多个参数用&分开
          var data="is_lock="+lock+"&uid="+uid;
          //Envoyer une requête de données AJAX
          xhr.send(data);
          //Configurer la fonction de rappel, l'écouteur de fonction
          xhr.onreadystatechange=function(){
            //Si le code d'état de la réponse AJAX est normal et que le réseau est normal, obtenir le texte de la réponse
            if(xhr.readyState==4&&xhr.status==200){
              if(xhr.responseText){
                document.getElementById('table').innerHTML=xhr.responseText;
              }else{
                alert("Échec du basculement d'état !");
              }
            }
          }
        }
    function del(uid){
      var del=window.confirm("Vous êtes sûr de vouloir supprimer ?");
      if(del){
        //Créer un objet AJAX
        var xhr=new XMLHttpRequest();
        //Ouvrir un lien
        xhr.open('post','del.php');
        //Configurer l'en-tête header
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        //data取值
        var data="uid="+uid;
        //Envoyer une requête AJAX
        xhr.send(data);
        //Configurer l'écouteur
        xhr.onreadystatechange=function(){
          //Si le code d'état de la réponse AJAX est normal et que le réseau est normal, obtenir le texte de la réponse
          if(xhr.readyState==4&&xhr.status==200){
            if(xhr.responseText){
              //Utiliser la réponse AJAX pour remplacer le contenu de l'étiquette table dans ce modèle
              document.getElementById('table').innerHTML=xhr.responseText;
            }else{
              alert("Échec de la suppression !");
            }
          }
        }
      }
    }    
    </script>
</html>

3. 02.php changer l'état sans recharger :

<?php
  include './include/Mysql.class.php';
  include './libs/Smarty.class.php';
  $lock=$_POST['is_lock'];
  $uid=$_POST['uid'];
  $smarty=new Smarty;
  $db=new Mysql;
  $result=$db->update('users',"is_lock=$lock","uid=$uid");
  if($result){
    //Modification réussie, parcourir à nouveau la base de données et afficher le modèle Smarty
    $lists=$db->getALL('users');
    $smarty->assign('lists',$lists);
    $smarty->display('list.html');
  }else{
    echo false;
  }
?>

4.del.php pour supprimer sans recharger

<?php
  include './include/Mysql.class.php';
  include './libs/Smarty.class.php';
  $db=new Mysql;
  $smarty=new Smarty;
  $uid=$_POST['uid'];
  $res=$db->delete('users',$uid);
  if($res>0){
    $lists=$db->getALL('users');
    $smarty->assign('lists',$lists);
    $smarty->display('list.html');
  }else{
    echo false;
  }
?>

Cet exemple d'AJAX permettant de modifier l'état et de supprimer sans recharger, partagé par l'auteur, est tout ce que j'ai à partager avec vous. J'espère que cela vous servira de référence et que vous continuerez à soutenir le tutoriel d'alarme.

Déclaration : Le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs, contribué et téléchargé par les utilisateurs d'Internet de manière spontanée. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (au moment de l'envoi d'un e-mail, veuillez remplacer # par @ pour signaler une violation de droits d'auteur et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base