ajax直接改變狀態和刪除無刷新狀態

這次帶給大家ajax直接改變狀態和刪除無刷新狀態，ajax直接改變狀態和刪除無刷新狀態的注意事項有哪些，下面就是實戰案例，一起來看一下。

1. 01.php為主程序，呼叫smarty模板遍歷輸出：

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

2. list.html模板:內容結合JS ajax使用：

nbsp;html>


  <meta>
  <title>用户权限展示表</title>


    //给table体设置一个p，方便js调用
    <p>
    </p>

      

用户权限表

                               {foreach $lists as $list}                                                     {if $list.is_lock==1}                          {else}                          {/if}               {if $list.role==1}                          {else}                              {/if}                               {/foreach}       

uid	用户名	密码	锁定状态	角色	操作
{$list.uid}	{$list.username}	{$list.password}	锁定	取消锁定	管理员	编辑者	删除

           <script> function lock(lock,uid){ //创建ajax对象 var xhr=new XMLHttpRequest(); //打开一个链接 xhr.open(&#39;post&#39;,&#39;02.php&#39;); //设置头信息 xhr.setRequestHeader(&#39;content-type&#39;,&#39;application/x-www-form-urlencoded&#39;); //取值,多个参数用&分开 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(&#39;table&#39;).innerHTML=xhr.responseText; }else{ alert("切换状态失败！"); } } } } function del(uid){ var del=window.confirm("您确定要删除吗？"); if(del){ //创建ajax对象 var xhr=new XMLHttpRequest(); //打开一个链接 xhr.open(&#39;post&#39;,&#39;del.php&#39;); //设置header头 xhr.setRequestHeader(&#39;content-type&#39;,&#39;application/x-www-form-urlencoded&#39;); //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(&#39;table&#39;).innerHTML=xhr.responseText; }else{ alert("删除失败！"); } } } } } </script>

3. 02.php改變狀態無刷新：

<?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->update('users',"is_lock=$lock","uid=$uid");
  if($result){
    //修改成功重新遍历数据库并输出smarty模板
    $lists=$db->getALL('users');
    $smarty->assign('lists',$lists);
    $smarty->display('list.html');
  }else{
    echo false;
  }
?>

4.del.php實作刪除無刷新

<?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->delete('users',$uid);
  if($res>0){
    $lists=$db->getALL('users');
    $smarty->assign('lists',$lists);
    $smarty->display('list.html');
  }else{
    echo false;
  }
?>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS的多執行緒運行庫Nexus.js使用詳解

JS做出行動裝置觸摸輪播效果

#

以上是ajax直接改變狀態和刪除無刷新狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！