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

我有一个小的JS代码，它不能按照我的需要工作

实际上，我的后端PHP代码包含很多函数，我想通过按submit按钮来处理这些函数，同时我还想显示状态“扫描”来代替submit按钮，当数据得到完全处理时，我想显示“完成”状态来代替submit按钮

<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>

$（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
键入：“post”，
url:'post.php'，
数据：$（'form'）。序列化（），
成功：函数（）{
$（#response）.show（）；
$（#form）.hide（）；
}
});
});
});

您可以在发送前使用

beforeSend
是一个请求前回调函数，可用于修改jqXHR

你可以参考更多细节

为了您的方便，您可以按照下面的代码进行操作


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>


$（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
让submitBtnEl=$（this.find（'button[type=“submit”]”）；//提交按钮元素
$.ajax({
键入：“post”，
url:'post.php'，
数据：$（'form'）。序列化（），
发送前：函数（xhr）{
submitBtnEl.html（'Scanning'）；//单击submit后，submit按钮文本将更改
},
成功：函数（）{
$（#response）.show（）；
$（#form）.hide（）；
submitBtnEl.html（'Completed'）；//表单完全提交后，提交按钮文本将更改
}
});
});
});



HTML:


提交



为方便起见，您可以在发送前使用
上的代码

beforeSend
是一个请求前回调函数，可用于修改jqXHR

你可以参考更多细节

为了您的方便，您可以按照下面的代码进行操作


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>


$（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
让submitBtnEl=$（this.find（'button[type=“submit”]”）；//提交按钮元素
$.ajax({
键入：“post”，
url:'post.php'，
数据：$（'form'）。序列化（），
发送前：函数（xhr）{
submitBtnEl.html（'Scanning'）；//单击submit后，submit按钮文本将更改
},
成功：函数（）{
$（#response）.show（）；
$（#form）.hide（）；
submitBtnEl.html（'Completed'）；//表单完全提交后，提交按钮文本将更改
}
});
});
});



HTML:


提交



为了方便起见，您可以在
上尝试该代码。当用户单击按钮时，您可以简单地显示您想要的任何内容。当你得到回应时，你可以随心所欲地改变。差不多

这只是模拟ajax请求的一个示例


var$button=$（“#btn”）；
$按钮。单击（函数（）{
$button.text（“扫描…”）；
var承诺=新承诺（功能（解决、拒绝）{
setTimeout（函数（）{
决议（“foo”）；
}, 5000);
});
promise.then（函数（）{
$button.text（“完成”）；
})
})

提交
当用户单击按钮时，您可以简单地显示您想要的任何内容。当你得到回应时，你可以随心所欲地改变。差不多

这只是模拟ajax请求的一个示例


var$button=$（“#btn”）；
$按钮。单击（函数（）{
$button.text（“扫描…”）；
var承诺=新承诺（功能（解决、拒绝）{
setTimeout（函数（）{
决议（“foo”）；
}, 5000);
});
promise.then（函数（）{
$button.text（“完成”）；
})
})

提交
wow
Promise
是
JavaScript ES6
中的一项新功能，对吗？不是新功能，但确实很棒
Promise
是
JavaScript ES6
中的一项新功能，对吗？不是新功能，但确实很棒