Method of Refreshing Partial Data States with Ajax Combined with MySQL Database and Smarty

Effect Status: Toggle between locked and unlocked states by clicking

1.Main Program: 01.php import smarty and mysql classes, get data and import list template

<?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');
?>

2The list template uses smarty to iterate over template data and display it, where AJAX is called to change the lock status

!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>User Permission Display Table</title>
</head>
<body>
    <table align="center" border="1" width="500">
      <center><h2>User Permission Table</h2></center>
      <tr>
        <th>uid</th><th>Username</th><th>Password</th><th>Lock Status</th><th>Role</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" >Lock</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}
        </tr>    
      {/foreach}  
    </table>  
</body>
    <script type="text/javascript">
      function lock(lock,uid){
          //create an AJAX object
          var xhr=new XMLHttpRequest();
          //open a link
          xhr.open('get','02.php?is_lock='+lock+"&uid="}}+uid);
          //Send AJAX request
          xhr.send(null);
          //Set callback, listen 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){
                window.location.reload();
              }else{
                alert("Failed to switch status!");
              }
            }
          }
        }
    </script>
</html>

3.ajax response script, receiving data passed through get method by ajax to change the database content and respond with text back to the js script

<?php
  include './include/Mysql.class.php';
  $lock=$_GET['is_lock'];
  $uid=$_GET['uid'];
  $db=new Mysql;
  $result=$db->update('users',"is_lock=$lock","uid=$uid");
  if($result){
    echo true;
  }else{
    echo false;
  }
?>

The above method of refreshing the partial data state combined with MySQL database and smarty shared by the editor is all the content shared with everyone. I hope it can provide a reference for everyone, and I also hope everyone will support the Shouting Tutorial.

Statement: The content of this article is from the Internet, 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 manually edited, and does not assume any 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 abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial