Ajax Implementation of Changing Status and Deleting Instances without Refresh

1. 01.php is the main program, calling smarty template to iterate and 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. list.html template: content combined with JS ajax usage:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>User Permission Display Table</title>/title>
</head>
<body>
    //Set a div for the table body for convenient js call
    <div id="table">
    <table align="center" border="1" width="500">
      <center><h2>User Permission Table</h/h2></center>
      <tr>
        <th>uid</th>/th><th>Username</th>/th><th>Password</th>/th><th>Lock Status</th>/th><th>Role</th>/th><th>Operation</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">Lock</a>/a></td>
            {else}
            <td><a href="javascript:lock(1,{$list.uid})" rel="external nofollow" ;>Unlock</a></td>  
          {/if}    
          {if $list.role==1}
              <td>Administrator</td>
          {else}
              <td>Editor</td>    
          {/if}
          <td><a href="javascript:del({$list.uid})" rel="external nofollow" >Delete</a></td>
        </tr>    
      {/foreach}  
    </table>
    </div>  
</body>
    <script type="text/javascript">
      function lock(lock,uid){
          //Create an AJAX object
          var xhr=new XMLHttpRequest();
          //Open a link
          xhr.open('post','02.php');
          //Set header information
          xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
          //value, multiple parameters separated by &
          var data="is_lock="+lock+"&uid="+uid;
          //Send AJAX data request
          xhr.send(data);
          //Set up callback and listener function
          xhr.onreadystatechange=function(){
            //If the AJAX status code response is normal and the network is normal, get the response text
            if(xhr.readyState==4&&xhr.status==200){
              if(xhr.responseText){
                document.getElementById('table').innerHTML=xhr.responseText;
              }else{
                alert("Failed to switch status!");
              }
            }
          }
        }
    function del(uid){
      var del=window.confirm("Are you sure you want to delete? ");
      if(del){
        //Create an AJAX object
        var xhr=new XMLHttpRequest();
        //Open a link
        xhr.open('post','del.php');
        //Set header information
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        //data value
        var data="uid="+uid;
        //Send AJAX request
        xhr.send(data);
        //Set up a listener
        xhr.onreadystatechange=function(){
          //If the AJAX status code response is normal and the network is normal, get the response text
          if(xhr.readyState==4&&xhr.status==200){
            if(xhr.responseText){
              //Use AJAX response content to replace the content of the table tag in this template
              document.getElementById('table').innerHTML=xhr.responseText;
            }else{
              alert("Deletion failed!");
            }
          }
        }
      }
    }    
    </script>
</html>

3. 02.php to 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){
    //Update successfully, 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 to 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;
  }
?>

The above example of AJAX implementation to change state and delete without refreshing is all the content that the editor shares with everyone. I hope it can give you a reference, and I also hope that everyone will support the Yell Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial