Javascript 使用ajax成功后删除加载图像

我有一些Ajax代码，所有代码都运行良好，但问题是加载图像时会不断显示

我想隐藏成功时的图像，还想更改表列的背景

我当前的代码：

index.php

    <?php 
include_once("db_connect.php");
?>
<title>phpzag.com : Demo Inline Editing using PHP MySQL and jQuery Ajax</title>
<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-alpha.5-dist/css/bootstrap.min.css"/>
<script type="text/javascript" src="script/functions.js"></script>
<div class="container">
    <h2>Example: Inline Editing using PHP MySQL and jQuery ajax</h2>
    <?php
    $sql = "SELECT id, employee_name, employee_salary, employee_age FROM table_record";
    $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
    ?>
    <table class="table table-condensed table-hover table-striped bootgrid-table">
        <thead>
          <tr>          
            <th>Employee Name</th>
            <th>Salary</th>
            <th>Age</th>                
          </tr>
        </thead>
        <tbody>
         <?php
         while( $rows = mysqli_fetch_assoc($resultset) ) { 
         ?>
              <tr>                
                  <td contenteditable="true" data-old_value="<?php echo $rows["employee_name"]; ?>" onBlur="saveInlineEdit(this,'employee_name','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["employee_name"]; ?></td>
                  <td contenteditable="true" data-old_value="<?php echo $rows["employee_salary"]; ?>"  onBlur="saveInlineEdit(this,'employee_salary','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["employee_salary"]; ?></td>
                  <td contenteditable="true" data-old_value="<?php echo $rows["employee_age"]; ?>"  onBlur="saveInlineEdit(this,'employee_age','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["employee_age"]; ?></td>
              </tr>
        <?php
        }
        ?>
        </tbody>
    </table>          

    <div style="margin:50px 0px 0px 0px;">
        <a class="btn btn-default read-more" style="background:#3399ff;color:white" href="http://www.phpzag.com/inline-editing-using-php-mysql-and-jquery-ajax" title="Inline Editing using PHP MySQL and jQuery ajax">Back to Tutorial</a>         
    </div>      
</div>

---

对于类似ajax的成功和错误方法，使用beforeSend方法

function highlightEdit(editableObj) {
   $(editableObj).css("background", "#FFF");
 }

 function saveInlineEdit(editableObj, column, id) {
   // No change change made then return false
   if ($(editableObj).attr('data-old_value') === editableObj.innerHTML)
     return false;
   // Send ajax to update value
   //$(editableObj).css("background", "#FFF url(loader.gif) no-repeat right");
   $.ajax({
     url: "saveInlineEdit.php",
     type: "POST",
     dataType: "json",
     data: 'column=' + column + '&value=' + editableObj.innerHTML + '&id=' + id,
     beforeSend : function(res){
        $(editableObj).css("background", "#FFF url(loader.gif) no-repeat right");
     },
     success: function(response) {
       // Set updated value as old value
       $(editableObj).attr('data-old_value', editableObj.innerHTML);
       $(editableObj).css("background", "#dcd8d8");
     },
     error: function() {
       console.log("errr");
     }
   });
 }

---

正如@Luka Kvavilashvili所说，您的

$（editableObj）.css（“背景”，“dcd8d8”）

将仅设置背景色，而不会更改其他样式，因此必须将其更改为：

success: function(response) {
   // Set updated value as old value
   $(editableObj).attr('data-old_value', editableObj.innerHTML);
   $(editableObj).css({"background-image":"none", "background":"#dcd8d8"});
 } 

另一个好的解决方案是利用

CSS

，做

td { background: #dcd8d8; }
.loading { background: #fff url(loader.gif) no-repeat right; }

并将

js

代码更改为

$(editableObj).addClass('loading');
$.ajax({
   ...
   success: function(response) {
      // Set updated value as old value
      $(editableObj).attr('data-old_value', editableObj.innerHTML);
      $(editableObj).removeClass('loading');
   }
 ...

---

只需使用.css（“background image”，“none”）来覆盖background image属性。@Luka-这应该是一个答案，而不是一个注释。我想写一个答案，但在很多情况下答案都很简单，就像注释中写的那样。如果您尝试过控制台，您可以更有效地访问此链接。在成功时记录一些内容，要知道被调用的方法？也许记录响应？我知道有一些javascript可以使字段可编辑，并且您正试图用ajax调用保存新参数，但问题仍然存在：“success”函数中的代码是否运行？您得到的“响应”有效吗？是，代码运行成功，并且在mysql数据库中完成了更新。只想隐藏正在加载的图像并想更改列背景色。问题是，在您共享的代码中，没有提及

editableObject

…对于删除

loader.gif

的唯一方法是，要设置

背景图像：无

…如果它不起作用，则可能是

可编辑对象

在

成功

函数中为空…尝试记录该对象以确保在发送前以这种方式尝试

success: function(response) {
   // Set updated value as old value
   $(editableObj).attr('data-old_value', editableObj.innerHTML);
   $(editableObj).css({"background-image":"none", "background":"#dcd8d8"});
 } 

td { background: #dcd8d8; }
.loading { background: #fff url(loader.gif) no-repeat right; }

$(editableObj).addClass('loading');
$.ajax({
   ...
   success: function(response) {
      // Set updated value as old value
      $(editableObj).attr('data-old_value', editableObj.innerHTML);
      $(editableObj).removeClass('loading');
   }
 ...