Esempio di esempio di cambiamento di stato e eliminazione senza ricarica tramite ajax

1. 01.php è il programma principale, che chiama il template smarty per eseguire il ciclo e visualizzare l'output:

<?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. Modello list.html: contenuto combinato con JS ajax:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Tabella di visualizzazione dei permessi degli utenti</title>
</head>
<body>
    //Imposta un div per il corpo del table, per facilitare l'accesso da parte di js
    <div id="table">
    <table align="center" border="1" width="500">
      <center><h2>Tabella dei permessi degli utenti</h2></center>
      <tr>
        <th>uid</th><th>Nome utente</th><th>Parola chiave</th><th>Stato di blocco</th><th>Ruolo</th><th>Operazioni</th>
      </tr>  
      {foreach $lists as $list}
        <tr align="center">
          <td>{$list.uid}</td>
          <td>{$list.username}</td>
          <td>{$list.password}</td>
          {if $list.is_lock==1}
            <td><a href="javascript:lock(0,{$list.uid});" rel="external nofollow">Blocca</a></td>
            {else}
            <td><a href="javascript:lock(1,{$list.uid})" rel="external nofollow" ;>解锁</a></td>  
          {/if}    
          {if $list.role==1}
              <td>管理员</td>
          {else}
              <td>编辑者</td>    
          {/if}
          <td><a href="javascript:del({$list.uid})" rel="external nofollow" >删除</a></td>
        </tr>    
      {/foreach}  
    </table>
    </div>  
</body>
    <script type="text/javascript">
      function lock(lock,uid){
          //创建ajax对象
          var xhr=new XMLHttpRequest();
          //打开一个链接
          xhr.open('post','02.php');
          //设置头信息
          xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
          //取值,多个参数用&分开
          var data="is_lock="+lock+"&uid="+uid;
          //发送ajax数据请求
          xhr.send(data);
          //设置回调、监听函数
          xhr.onreadystatechange=function(){
            //如果ajax状态码响应正常且网络正常，获取响应文本
            if(xhr.readyState==4&&xhr.status==200){
              if(xhr.responseText){
                document.getElementById('table').innerHTML=xhr.responseText;
              }else{
                alert("切换状态失败！");
              }
            }
          }
        }
    function del(uid){
      var del=window.confirm("您确定要删除吗？");
      if(del){
        //创建ajax对象
        var xhr=new XMLHttpRequest();
        //打开一个链接
        xhr.open('post','del.php');
        //设置header头
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        //data取值
        var data="uid="+uid;
        //发送ajax请求
        xhr.send(data);
        //设置监听
        xhr.onreadystatechange=function(){
          //如果ajax状态码响应正常且网络正常，获取响应文本
          if(xhr.readyState==4&&xhr.status==200){
            if(xhr.responseText){
              //用ajax响应内容替换本模板中table标签的内容
              document.getElementById('table').innerHTML=xhr.responseText;
            }else{
              alert("Deletion failed!");
            }
          }
        }
      }
    }    
    </script>
</html>

3. 02.php change status without refreshing:

<?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){
    //Modify success and traverse the database again and output the smarty template
    $lists=$db->getALL('users');
    $smarty->assign('lists',$lists);
    $smarty->display('list.html');
  }else{
    echo false;
  }
?>

4.del.php implement deletion without refreshing

<?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;
  }
?>

This instance of AJAX implementation of changing status and deleting without refreshing is all the content that the editor shares with everyone. I hope it can provide a reference for everyone and hope everyone will support and cheer for the tutorial.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not undergo manual editing, nor bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) for reporting, and provide relevant evidence. Once confirmed, this site will immediately delete the content suspected of infringement.

Corso di base