مثال على تغيير الحالة وال�除اء دون تحديث الصفحة باستخدام ajax

1. 01.php هو البرنامج الرئيسي، يستدعي نموذج smarty لتصفية الإخراج

<?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: التكامل بين المحتوى و JavaScript AJAX

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>جداول عرض الصلاحيات للمستخدمين</title>
</head>
<body>
    //إعداد div للجسد من table، مما يسهل استدعاء JavaScript
    <div 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>
    </div>  
</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>

3. 02.php لتغيير الحالة بدون تحديث:

<?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) {
    // نجح التعديل، قم بتكرار استنساخ قاعدة البيانات وإخراج نموذج Smarty
    $lists = $db->getALL('users');
    $smarty->assign('lists', $lists);
    $smarty->display('list.html');
  } else {
    echo false;
  }
?>

4.del.php لتحقيق حذف بدون تحديث

<?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;
  }
?>

هذا المثال على تنفيذ AJAX لتحويل الحالة وإزالة التحميل بدون تحديث الذي قدمته إليكم هو كل محتوى كنت أشاركه، وأتمنى أن يكون هذا مرجعًا جيدًا لك، وأتمنى أيضًا أن تدعموا تعليمات النفخ.

إعلان: محتوى هذا المقال تم جمعه من الإنترنت، يحق لصاحب الحقوق أن يتحكم فيه، يتم جمع المحتوى من قبل المستخدمين عبر الإنترنت ويتم تحميله بشكل مستقل، هذا الموقع لا يمتلك حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا اكتشفت محتوى يشتبه في حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال # ب @ عند إرسال البريد الإلكتروني) لتقديم الشكوى، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم بشكل فوري.

تعليمية الأساس

أنت قد تعجبك