发布后用Jquery更改按钮上的文本

Question

我使用ajax发布一些数据，并希望更改按钮文本。我真的不知道从哪里开始。我到目前为止的代码如下：

$("input[type='button'][name='Subscribe']").click(function(e){
$.ajax({
   type: "POST",
   url: "test.php",
   data:{
    id: $(this).attr('id'),
    idMembers: $(this).attr('idMembers')
    },
   success: function(msg){
       alert("Subscribed");

   }
})
});

Answer 1

$("input[type='button'][name='Subscribe']").click(function(e){
$this = $(this);
$this.val("processing") // or: this.value = "processing";  
$this.prop('disabled', true); // no double submit ;)
$.ajax({
   type: "POST",
   url: "test.php",
   data:{
    id: $this.attr('id'),
    idMembers: $this.attr('idMembers')
    },
   success: function(msg){
       alert("Subscribed");
       $this.val("i'm finally done!"); // pfewww, that's was hard work!
   }
})
});

Answer 2

试试这个：

$("input[type='button'][name='Subscribe']").click(function(e){

$(this).text('My new text');

$.ajax({
   type: "POST",
   url: "test.php",
   data:{
    id: $(this).attr('id'),
    idMembers: $(this).attr('idMembers')
    },
   success: function(msg){
       alert("Subscribed");

   }
}) });

Answer 3

   $("input[type='button'][name='Subscribe']").click(function(e){
   var _button = $(e.target);
   $.ajax({
      type: "POST",
      url: "test.php",
      data:{
         id: $(this).attr('id'),
         idMembers: $(this).attr('idMembers')
      },
      success: function(msg){
          alert("Subscribed");
          _button.val('Subscribed')
      }
   })
   });

Answer 4

$("input[type='button'][name='Subscribe']").attr('value', 'newvalue here!');

Answer 5

这是所有这些中的最佳解决方案，可让您控制何时显示文本 -

只需在jQuery请求中添加java -D...=...和beforeSend方法即可。这是一个例子

complete

正如您所看到的，// contact form handling using AJAX $('#contact-form').submit(function() { var contactForm = $('#contact-form'), btnSubmit = $('.btn-submit'); $.ajax({ type: contactForm.attr('method'), url: contactForm.attr('action'), data: contactForm.serialize(), beforeSend: function() { // while sending the request the button is disabled and it shows loading spinner btnSubmit.prop('disabled', true); btnSubmit.html('<i class="fa fa-spinner fa-spin fa-fw btn-icon fa-2x"></i>'); }, complete: function() { // after the request is sent, the spinner is gone and now it's back to normal. One can submit again btnSubmit.prop('disabled', false); btnSubmit.html('<i class="fa fa-paper-plane fa-lg btn-icon" aria-hidden="true"></i> Submit'); }, success: function(response) { if (response == 'success') { alert("Hi, your query has been sent. I will be back to you soon. Thank you :)"); } else { var erroMsg = response.split('<br/>').join('\n'); alert(erroMsg); } } }); return false; }); 可让您控制发送请求时的操作，beforeSend可让您控制成功发送请求时的操作。

希望它有所帮助。谢谢。