Question

我有一些小的JS代码，无法按照我的需要工作。

实际上，我的后端PHP代码包含许多功能，我想通过按“提交”按钮来处理，与此同时，我也想显示状态“扫描”代替“提交”按钮，并且当数据被完全处理时，我想在提交按钮的位置显示“已完成”状态。

<script>
  $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'post.php',
        data: $('form').serialize(),
        success: function () {
          $(#response).show();
          $(#form).hide();
        }
      });
    });
  });
</script>

Answer 1

可以使用beforeSend ...

beforeSend是可以用来修改jqXHR ..

的预请求回调函数

可以指here对于更多的细节。

你可以按照下面为您放心我的代码。

..

Javascript：

<script>
  $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();

      let submitBtnEl = $(this).find('button[type="submit"]'); //submit button element

      $.ajax({
        type: 'post',
        url: 'post.php',
        data: $('form').serialize(),
        beforeSend: function( xhr ) {
            submitBtnEl.html('Scanning'); //the submit button text will change after click submit
        },
        success: function () {
            $(#response).show();
            $(#form).hide();
            submitBtnEl.html('Completed'); //the submit button text will change after the form is completely submit
        }
      });
    });
  });
</script>

。

HTML：

<form>
    <input type="text" name="input1" />
    <button type="submit">Submit</button>
</form>

。

为方便起见，您可以在this fiddle上尝试使用代码

Answer 2

您可以在用户单击按钮时简单地显示所需内容。当您得到响应时，您可以更改为所需的任何内容。就像是。

这只是模拟ajax请求的示例。

var $button = $("#btn");

$button.click(function() {

    $button.text("Scanning...");

    var promise = new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('foo');
        }, 5000);
    });
    
    promise.then(function(){
     $button.text("Done");
    })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn"> Submit </button>

通过更改提交按钮文本来更新表单状态

2 个答案: