在 jquery 中通过 $.ajax 提交表单后获取成功信息答案

【问题标题】：Getting a success info after submitting form via $.ajax in jquery在 jquery 中通过 $.ajax 提交表单后获取成功信息
【发布时间】：2012-05-30 07:44:26
【问题描述】：

我的单个页面上有一些表单，我正在通过这种方法提交它们：

$(function() {  
    $(".button").click(function() {  

var upform = $(this).closest('.upform'); 

    var txt = $(this).prev(".tekst").val();  

    var dataString = 'tekst='+ txtr;

    $.ajax({  
          type: "POST",  
          url: "http://url-to-submit.com/upload/baza",  
          data: dataString,  
          success: function() {  

            upform.html("<div class='message'></div>");  

            $('.message').html("<h2>FORM SUBMITTED</h2>")  
            .append("<p>THANKS!!</p>")  
            .hide()  
            .fadeIn(1500, function() {  
            $('.message').append("<img src='http://my-images.com/i/check.png' />");  
            });  


          }  
        });  
    return false; 

    });  
  });

如您所见，提交表单后，显示的是消息 div，而不是提交的表单。

它完美地工作，当我只提交一个表单时 - 然后它会更改为我的消息 div，但是当我提交第二个，下一个和下一个时 - 每次我已经提交的所有表单的消息都刷新。看起来很糟糕。我只想对实际提交的表单进行操作。如何解决？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您正在使用$('.message').html() 设置每个.message div 的消息。试试这个：

upform.find('.message').html(...)

【讨论】：

【解决方案2】：

如果不看你的 HTML 看起来如何，很难说，但我猜是这一点，

$('.message')

应该是这样的，

$('.message', upForm).

【讨论】：

【解决方案3】：

首先，您必须找出 message div (upform.find('.message'))，然后向其中添加任何 html。我认为你的代码应该是

$(function() {  
    $(".button").click(function() {  

var upform = $(this).closest('.upform'); 

    var txt = $(this).prev(".tekst").val();  

    var dataString = 'tekst='+ txtr;

    $.ajax({  
          type: "POST",  
          url: "http://url-to-submit.com/upload/baza",  
          data: dataString,  
          success: function() {  

            upform.html("<div class='message'></div>");  

            upform.find('.message').html("<h2>FORM SUBMITTED</h2>")  
            .append("<p>THANKS!!</p>")  
            .hide()  
            .fadeIn(1500, function() {  
            upform.find('.message').append("<img src='http://my-images.com/i/check.png' />");  
            });  


          }  
        });  
    return false; 

    });  
  });

【讨论】：

【解决方案4】：

另一种无需在当前代码中进行更多编辑的方法，只需添加几行即可。

var msgbox = $("<div class='message'></div>");
upform.html(msgbox);
msgbox.html("<h2>FORM SUBMITTED</h2>")  
.append("<p>THANKS!!</p>")  
.hide()  
.fadeIn(1500, function() {  
  $(this).append("<img src='http://my-images.com/i/check.png' />");  
});

【讨论】：