Rumah hujung hadapan web tutorial js ajax直接改变状态和删除无刷新状态

ajax直接改变状态和删除无刷新状态

Apr 14, 2018 am 10:13 AM
ajax padam negeri

这次给大家带来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');
?>
Salin selepas log masuk

2. list.html模板:内容结合JS ajax使用:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>用户权限展示表</title>
</head>
<body>
    //给table体设置一个p,方便js调用
    <p id="table">
    <table align="center" border="1" width="500">
      <center><h2>用户权限表</h2></center>
      <tr>
        <th>uid</th><th>用户名</th><th>密码</th><th>锁定状态</th><th>角色</th><th>操作</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" >锁定</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>
    </p>  
</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("删除失败!");
            }
          }
        }
      }
    }    
    </script>
</html>
Salin selepas log masuk

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;
  }
?>
Salin selepas log masuk

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;
  }
?>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS的多线程运行库Nexus.js使用详解

JS做出移动端触摸轮播效果

Atas ialah kandungan terperinci ajax直接改变状态和删除无刷新状态. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memadam nota Xiaohongshu Bagaimana untuk memadam nota Xiaohongshu Mar 21, 2024 pm 08:12 PM

Bagaimana untuk memadamkan nota Xiaohongshu? pandangan! Tutorial penggunaan Xiaohongshu Cara memadam nota Xiaohongshu 1. Mula-mula buka APP Xiaohongshu dan masukkan halaman utama, pilih [Saya] di sudut kanan bawah untuk memasuki kawasan khas 2. Kemudian di kawasan Saya, klik pada halaman nota sebagai ditunjukkan di bawah , pilih nota yang anda mahu padamkan;

Adakah benar anda boleh disekat dan dipadamkan pada WeChat dan tidak dapat ditambahkan secara kekal? Adakah benar anda boleh disekat dan dipadamkan pada WeChat dan tidak dapat ditambahkan secara kekal? Apr 08, 2024 am 11:41 AM

1. Pertama sekali, adalah palsu untuk menyekat dan memadam seseorang secara kekal dan tidak menambahkannya secara kekal. Jika anda ingin menambah pihak lain selepas anda menyekat dan memadamkannya, anda hanya memerlukan persetujuan pihak lain. 2. Jika pengguna menyekat seseorang, pihak yang satu lagi tidak akan dapat menghantar mesej kepada pengguna, melihat kalangan rakan pengguna atau membuat panggilan dengan pengguna. 3. Menyekat tidak bermakna memadamkan pihak lain daripada senarai kenalan WeChat pengguna. 4. Jika pengguna memadamkan pihak lain daripada senarai kenalan WeChat pengguna selepas menyekat mereka, tiada cara untuk pulih selepas pemadaman. 5. Jika pengguna ingin menambah pihak yang satu lagi sebagai rakan semula, pihak yang satu lagi perlu bersetuju dan menambah pengguna itu semula.

Apakah folder yang ditemui.000? Bolehkah folder yang dijumpai.000 dipadamkan? Apakah folder yang ditemui.000? Bolehkah folder yang dijumpai.000 dipadamkan? Mar 13, 2024 pm 08:52 PM

Dalam proses penggunaan harian komputer, anda mungkin menerima mesej ralat bahawa fail found.000 hilang dan rosak Apakah folder ini dijumpai.000? Bolehkah ia dipadam jika ia tidak berguna lagi? Oleh kerana ramai orang tidak tahu fail ini, izinkan saya memberitahu anda tentang folder yang dijumpai.000 secara terperinci~ 1. Apakah folder yang dijumpai.000 Apabila komputer hilang sebahagian atau sepenuhnya kerana penutupan tidak sah, , anda boleh mencari folder khas bernama "found.000" dan fail dengan sambungan ".chk" yang terkandung di dalamnya dalam direktori yang ditentukan dalam partition sistem. Ini "fo

Bagaimana untuk memadam keluaran Xiaohongshu? Bagaimana untuk memulihkan selepas pemadaman? Bagaimana untuk memadam keluaran Xiaohongshu? Bagaimana untuk memulihkan selepas pemadaman? Mar 21, 2024 pm 05:10 PM

Sebagai platform e-dagang sosial yang popular, Xiaohongshu telah menarik sejumlah besar pengguna untuk berkongsi kehidupan harian dan pengalaman membeli-belah mereka. Kadangkala kami mungkin secara tidak sengaja menerbitkan beberapa kandungan yang tidak sesuai, yang perlu dipadamkan dalam masa untuk mengekalkan imej peribadi kami dengan lebih baik atau mematuhi peraturan platform. 1. Bagaimana untuk memadam keluaran Xiaohongshu? 1. Log masuk ke akaun Xiaohongshu anda dan masukkan halaman utama peribadi anda. 2. Di bahagian bawah halaman utama peribadi, cari pilihan "Ciptaan Saya" dan klik untuk masuk. 3. Pada halaman "Ciptaan Saya", anda boleh melihat semua kandungan yang diterbitkan, termasuk nota, video, dsb. 4. Cari kandungan yang perlu dipadamkan dan klik butang "..." di sebelah kanan. 5. Dalam menu pop timbul, pilih pilihan "Padam". 6. Selepas mengesahkan pemadaman, kandungan akan hilang dari laman utama peribadi anda dan halaman awam.

Bagaimanakah saya boleh mendapatkan semula ulasan orang lain yang dipadamkan pada Xiaohongshu? Adakah ia akan dipaparkan jika komen orang lain dipadamkan? Bagaimanakah saya boleh mendapatkan semula ulasan orang lain yang dipadamkan pada Xiaohongshu? Adakah ia akan dipaparkan jika komen orang lain dipadamkan? Mar 21, 2024 pm 10:46 PM

Xiaohongshu ialah platform e-dagang sosial yang popular, dan komen interaktif antara pengguna merupakan kaedah komunikasi yang sangat diperlukan pada platform tersebut. Kadangkala, kami mungkin mendapati ulasan kami telah dipadamkan oleh orang lain, yang boleh mengelirukan. 1. Bagaimanakah saya boleh mendapatkan semula ulasan orang lain yang dipadamkan pada Xiaohongshu? Apabila anda mendapati ulasan anda telah dipadamkan, anda boleh cuba mencari terus siaran atau produk yang berkaitan di platform terlebih dahulu untuk melihat sama ada anda masih boleh menemui ulasan tersebut. Jika ulasan masih dipaparkan selepas dipadamkan, ia mungkin telah dipadamkan oleh pemilik siaran asal Pada masa ini, anda boleh cuba menghubungi pemilik siaran asal untuk bertanya sebab memadam ulasan dan meminta untuk memulihkan ulasan. Jika ulasan telah dipadamkan sepenuhnya dan tidak dapat ditemui pada siaran asal, kemungkinan ia dikembalikan pada platform agak tipis. Anda boleh mencuba cara lain

Bagaimana untuk memadam sepenuhnya sejarah sembang TikTok Bagaimana untuk memadam sepenuhnya sejarah sembang TikTok May 07, 2024 am 11:14 AM

1. Buka apl Douyin, klik [Mesej] di bahagian bawah antara muka dan klik entri perbualan sembang yang perlu dipadamkan. 2. Tekan lama mana-mana rekod sembang, klik [Multiple Select], dan semak rekod sembang yang ingin anda padamkan. 3. Klik butang [Padam] di penjuru kanan sebelah bawah dan pilih [Sahkan pemadaman] dalam tetingkap pop timbul untuk memadam rekod ini secara kekal.

Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Mar 15, 2024 am 09:49 AM

Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber

Cara memadam sepenuhnya Pembantu Pemindahan Fail WeChat_Pengenalan kepada cara menutup Pembantu Pemindahan Fail WeChat Cara memadam sepenuhnya Pembantu Pemindahan Fail WeChat_Pengenalan kepada cara menutup Pembantu Pemindahan Fail WeChat Mar 20, 2024 pm 08:31 PM

Pembantu pemindahan fail WeChat tersedia untuk setiap pengguna Sesetengah pengguna menggunakannya sebagai memo untuk merekodkan beberapa perkara. Jadi bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat? Izinkan saya memperkenalkannya kepada anda secara terperinci di bawah. Bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat Jawapan: [WeChat]-[Tekan lama Pembantu Pemindahan Fail]-[Padam sembang ini]. Langkah-langkah khusus: 1. Mula-mula buka perisian WeChat Selepas memasuki halaman utama, kami mencari [Pembantu Pemindahan Fail] dan tekan dan tahan 2. Kemudian pop timbul akan ditandakan sebagai belum dibaca, sematkan sembang ke bahagian atas, lakukan tidak memaparkan sembang, dan memadam sembang Di sini Kita boleh klik [Padam sembang ini];

See all articles