在php中进程完成后更改JS/jQuery中的按钮文本

Question

我正在编写jQuery/AJAX代码，如下所示，它调用了convert.php脚本。

   jQuery(document).ready(function($)
   {
    $('.go-btn').click(function()
    {   
        let target = $(this).attr('data-id'),
            spanEl = $('.file-name[data-id='+ target +']');

        $.ajax({
            url: 'convert.php',
            type: 'POST',
            data: {id: target}, //change to what you want
            success: function(res)
            {
                console.log("Tested");
            },
            error: function(res)
            {

            }
        })
    })  
   });  

在convert.php脚本中，正在将mp4转换为mp3。一旦转换完成，就会在控制台上打印经过测试的。

问题陈述：

我想知道我应该在上面的jQuery/AJAX代码中做哪些修改，这样一旦转换完成，属于下面的代码的按钮文本就会更改为。

上面的jQuery/AJAX代码在单击按钮时被调用。下面是属于按钮的HTML代码片段：

HTML代码：

  <?php  foreach ($programs as $key => $program) {  ?> 
       <tr data-index="<?php echo $key; ?>">
          <td><input type="submit" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
       </tr>
  <?php }?>

Answer 1

这只是一个捕获被点击的按钮的问题：

​

jQuery(document).ready(function($) {
  $('.go-btn').click(function() {
    let target = $(this).attr('data-id'),
      spanEl = $('.file-name[data-id=' + target + ']');
    // Capture the element that received the event
    let btn = this;
    $(btn).val("Converting").prop('disabled', true).css({
      'text-align': 'center',
      'border-color': '#000',
      'width': '120px'
    });
    $.ajax({
      url: 'https://api.myjson.com/bins/80dex',
      method: 'GET', // Change this back to POST
      data: {
        id: target
      }, //change to what you want
      success: function(res) {
        $(btn).val("Completed")
      },
      error: function(res) {
        $(btn).prop('disabled', false).val("Go").removeAttr('style');
      }
    })
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<tr data-index="1">
  <td>
    <input type="submit" name="go-button" class="go-btn" value="Go" data-id="1"></input>
  </td>
</tr>
<tr data-index="2">
  <td>
    <input type="submit" name="go-button" class="go-btn" value="Go" data-id="2"></input>
  </td>
</tr>
<tr data-index="3">
  <td>
    <input type="submit" name="go-button" class="go-btn" value="Go" data-id="3"></input>
  </td>
</tr>

​