Ajax ändert den Status direkt und löscht den Status ohne Aktualisierung-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ajax ändert den Status direkt und löscht den Status ohne Aktualisierung

Apr 14, 2018 am 10:13 AM

ajax 删除状态

Dieses Mal bringe ich Ihnen Ajax, um den Status direkt zu ändern und den Nicht-Aktualisierungsstatus zu löschen. Was sind die Vorsichtsmaßnahmen für Ajax, um den Status direkt zu ändern und den Nicht-Aktualisierungsstatus zu löschen? ist ein praktischer Fall, werfen wir einen Blick darauf.

1. 01.php ist das Hauptprogramm, das die Smarty-Vorlage zum Durchlaufen der Ausgabe aufruft:

&lt;?php
  include &#39;./include/Mysql.class.php&#39;;
  include &#39;./libs/Smarty.class.php&#39;;
  $db=new Mysql;
  $smarty=new Smarty;
  $lists=$db-&gt;getALL('users');
  $smarty-&gt;assign('lists',$lists);
  $smarty-&gt;display('list.html');
?&gt;

Nach dem Login kopieren

2. list.html-Vorlage: Inhalt kombiniert mit JS-Ajax:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=utf-8&gt;
  &lt;title&gt;用户权限展示表&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    //给table体设置一个p，方便js调用
    &lt;p id=&quot;table&quot;&gt;
    &lt;table align=&quot;center&quot; border=&quot;1&quot; width=&quot;500&quot;&gt;
      &lt;center&gt;&lt;h2&gt;用户权限表&lt;/h2&gt;&lt;/center&gt;
      &lt;tr&gt;
        &lt;th&gt;uid&lt;/th&gt;&lt;th&gt;用户名&lt;/th&gt;&lt;th&gt;密码&lt;/th&gt;&lt;th&gt;锁定状态&lt;/th&gt;&lt;th&gt;角色&lt;/th&gt;&lt;th&gt;操作&lt;/th&gt;
      &lt;/tr&gt;  
      {foreach $lists as $list}
        &lt;tr align=&quot;center&quot;&gt;
          &lt;td&gt;{$list.uid}&lt;/td&gt;
          &lt;td&gt;{$list.username}&lt;/td&gt;
          &lt;td&gt;{$list.password}&lt;/td&gt;
          {if $list.is_lock==1}
            &lt;td&gt;&lt;a href=&quot;javascript:lock(0,{$list.uid});&quot; rel=&quot;external nofollow&quot; &gt;锁定&lt;/a&gt;&lt;/td&gt;
            {else}
            &lt;td&gt;&lt;a href=&quot;javascript:lock(1,{$list.uid})&quot; rel=&quot;external nofollow&quot; ;&gt;取消锁定&lt;/a&gt;&lt;/td&gt;  
          {/if}    
          {if $list.role==1}
              &lt;td&gt;管理员&lt;/td&gt;
          {else}
              &lt;td&gt;编辑者&lt;/td&gt;    
          {/if}
          &lt;td&gt;&lt;a href=&quot;javascript:del({$list.uid})&quot; rel=&quot;external nofollow&quot; &gt;删除&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;    
      {/foreach}  
    &lt;/table&gt;
    &lt;/p&gt;  
&lt;/body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      function lock(lock,uid){
          //创建ajax对象
          var xhr=new XMLHttpRequest();
          //打开一个链接
          xhr.open('post','02.php');
          //设置头信息
          xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
          //取值,多个参数用&amp;分开
          var data="is_lock="+lock+"&amp;uid="+uid;
          //发送ajax数据请求
          xhr.send(data);
          //设置回调、监听函数
          xhr.onreadystatechange=function(){
            //如果ajax状态码响应正常且网络正常，获取响应文本
            if(xhr.readyState==4&amp;&amp;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&amp;&amp;xhr.status==200){
            if(xhr.responseText){
              //用ajax响应内容替换本模板中table标签的内容
              document.getElementById('table').innerHTML=xhr.responseText;
            }else{
              alert("删除失败！");
            }
          }
        }
      }
    }    
    &lt;/script&gt;
&lt;/html&gt;

Nach dem Login kopieren

3. 02.php ändert den Status ohne Aktualisierung:

&lt;?php
  include &#39;./include/Mysql.class.php&#39;;
  include &#39;./libs/Smarty.class.php&#39;;
  $lock=$_POST[&#39;is_lock&#39;];
  $uid=$_POST[&#39;uid&#39;];
  $smarty=new Smarty;
  $db=new Mysql;
  $result=$db-&gt;update('users',"is_lock=$lock","uid=$uid");
  if($result){
    //修改成功重新遍历数据库并输出smarty模板
    $lists=$db-&gt;getALL('users');
    $smarty-&gt;assign('lists',$lists);
    $smarty-&gt;display('list.html');
  }else{
    echo false;
  }
?&gt;

Nach dem Login kopieren

4.del.php erreicht das Löschen ohne Aktualisierung

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

Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Multithread-Laufzeitbibliothek Nexus.js von JS

JS to Machen Sie mobile Touch-Karussell-Effekt

Das obige ist der detaillierte Inhalt vonAjax ändert den Status direkt und löscht den Status ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn