如何在ajax过程中显示加载动画和禁用按钮答案

【问题标题】：how to show loading animation and disable button during ajax process如何在ajax过程中显示加载动画和禁用按钮
【发布时间】：2019-06-21 15:34:24
【问题描述】：

我正在使用 ajax 将按钮的 id 发送到 test.php，但我被困在如何在 ajax 过程中禁用按钮并显示处理图像 gif 的步骤上，

当我使用我的代码时，它只会禁用和隐藏第一个表格行按钮，而不是单击的特定按钮

我的代码是这样的

     <tbody>

   <?php

   $letter=mysqli_query($con,"SELECT * FROM letters order by id DESC");



             if(mysqli_num_rows($letter)>0){
        while($rows_letter=mysqli_fetch_array($letter))

        {
$id=$rows_letter['id'];
$subject=$rows_letter['subject'];
$status=$rows_letter['status'];
?>

    <tr>
      <th class="text-center" scope="row">1</th>
      <td class="text-center"><?php echo $subject ;?></td>
      <td class="text-center"><?php if($status == 1){echo '<mark style="background-color: #5cb85c; color:white;" > Successfully Sent </mark>'; }else{ echo '<mark  style="background-color:#f0ad4e; color:white;"> Not  Sent Yet </mark>';}?></td>
      <td><button type="button" class="btn btn-info btn-sm btn-block">
      <span class="fa fa-pencil-square-o"></span> Edit</button></td>
      <td><button type="button" class="btn btn-danger btn-sm btn-block"> <span class="fa fa-trash-o"></span>  Move To Trash</button></td>
      <td>
      <img src="https://svc.opushealth.com/balcoltrasavings/img/Processing.gif" id="img" style="display:none"/>
      <button type="button" onclick="startsend(<?php echo $id;?>);"
      id="id"  value="<?php echo $id;?>"class="btn btn-success btn-sm btn-block">
      <span class="fa fa-paper-plane-o"></span> Send To All</button></td>
    </tr>


      <?php

        }

             }      

          ?>
     </tbody>
       <script type='text/javascript'>

    //AJAX function
   function startsend(id) {
       $('#img').show(); 
       $("#id").attr("disabled", true);
      $.ajax({
        type: "POST",
        url: "test.php",
        data:{ id: id },
        success: function(msg){
        alert( "Button Id is " + msg );
         $('#img').hide();

        }
      });
    }

</script>

test.php 文件是

 <?php

if(isset($_POST['id'])){
$id = $_POST['id'];}
///rest process
?>

【问题讨论】：

标签： php jquery mysql ajax

【解决方案1】：

首先，您需要在 PHP 的循环中删除您在 HTML 中创建的任何 id 属性，因为这将创建无效的重复项。而是将它们更改为类。

其次，使用不显眼的事件处理程序附加您的事件，而不是内联事件处理程序，因为它们已过时且是不好的做法。当您使用 jQuery 时，这可以通过 click() 或 on() 方法来完成。

最后，在该不显眼的事件处理程序中，您可以使用this 关键字来引用引发事件的元素并根据需要对其进行修改。试试这个：

<img src="https://svc.opushealth.com/balcoltrasavings/img/Processing.gif" class="img" style="display: none" />
<button type="button" value="<?php echo $id;?>" class="id btn btn-success btn-sm btn-block">
  <span class="fa fa-paper-plane-o"></span> 
  Send To All
</button>

$('button.id').on('click', function() {
  var $btn = $(this).prop("disabled", true);
  var $img = $btn.prev('.img').show(); 

  $.ajax({
    type: "POST",
    url: "test.php",
    data: { id: $btn.val() },
    success: function(msg) {
      console.log("Button Id is " + msg);
      $img.hide();
    }
  });
});

【讨论】：

感谢您的建议，我是 javascript 和 ajax 的初学者

【解决方案2】：

如果您使用的是 ajax，那么（使其尽可能简单）。

将加载的 gif 图像添加到 html 并使其隐藏（现在使用 html 本身的样式，您可以将其添加到单独的 CSS）：-

<img src="path\to\loading\gif" id="img" style="display:none"/ >

单击按钮时显示图像，并在成功功能时再次隐藏。

$('#buttonID').click(function(){
  $('#img').show(); //<----show here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

确保在 ajax 错误回调中也隐藏图像，以确保即使 ajax 失败，gif 也会隐藏。

【讨论】：