$ .ajax（）成功函數不工作

Question

我有一個AJAX表單，我正在尋找通過AJAX將數據提交給後臺控制器的函數。現在，我有下面的JS，並使用下面的控制器代碼來測試。但是，雖然函數返回200響應，我可以看到Firebug中的響應成功和錯誤功能沒有運行。有任何想法嗎？

$('contact_form').submit(function() { 
    var valuesToSubmit = $(this).serialize(); 

    $.ajax({ 
     url: $(this).attr('action'), 
     data: valuesToSubmit, 
     dataType: 'json', 
     type: 'POST', 
     success: function(data) { 
      alert('success'); 
     }, 
     error: function(data) { 
      alert('error'); 
     } 
    }); 

    return false; // prevents normal behavior 
}); 

我試過超出警報的代碼，它仍然無法正常工作。另外，下面是控制器。幫助是極大的讚賞

def ajax_response 
    render :json => { 
     :name => 'test' 
    }  
end 

*編輯 - 添加HTML表單的情況下，這是與此有關

<form accept-charset="UTF-8" action="/contact_message" data-remote="true" id="contact_form" method="post"> 

<label for="name">Name</label><span class="color-red">*</span> 
<div class="row margin-bottom-20"> 
    <div class="col-md-7 col-md-offset-0"> 
     <input class="form-control" id="name" name="name" type="text" /> 
    </div> 
</div> 

<label for="email">Email</label><span class="color-red">*</span> 
<div class="row margin-bottom-20"> 
    <div class="col-md-7 col-md-offset-0"> 
     <input class="form-control" id="email" name="email" type="text" /> 
    </div> 
</div> 

<label for="message">Message</label><span class="color-red">*</span> 
<div class="row margin-bottom-20"> 
    <div class="col-md-11 col-md-offset-0"> 
     <textarea class="form-control" id="message" name="message" rows="8"></textarea> 
    </div> 
</div> 

<p> 
    <button class="btn-u" name="button" type="submit">Send Message</button> 
</p> 

</form> 

Answer 1

發帖按照業務方案的要求的答案，因爲這導致了答案。

您的第一行代碼更改爲：

$('#contact_form').submit(function() { 

匹配值在HTML的ID。

然後，做一些基本的調試。在Ajax調用之前放置一個console.log("got here")，看看您是否在調試日誌中看到當您單擊表單中的提交按鈕時。這會告訴你你的.submit()處理程序是否被調用，並會告訴你下一步要看的地方。

Answer 2

的幾件事情浮現在我的腦海裏，而看你的代碼可能會導致此問題：

作爲評價＃2和＃3中說明由jfriend00都沒有問題

1. $('contact_form')指元素<contact_form>。它是否存在或旨在指代一個類$('.contact_form')或ID $('#contact_form')？
2. 在行url: $(this).attr('action')$(this)實際上並不存在，所以你需要在ajax調用之前定義一個變量，並在其中存儲this。 var that=this再行更改爲url: $(that).attr('action')
3. return false其實並沒有阻止事件的默認操作的最佳方式，更好的辦法是使用.preventDefault()

最終你的代碼可能看起來像這樣的：（假設contact_form是一個id）

$('#contact_form').submit(function(e) { 
    e.preventDefault(); 
    var valuesToSubmit = $(this).serialize(); 
    var that=this; 
    $.ajax({ 
     url: $(that).attr('action'), 
     data: valuesToSubmit, 
     dataType: 'json', 
     type: 'POST', 
     success: function(data) { 
      alert('success'); 
     }, 
     error: function(data) { 
      alert('error'); 
     } 
    }); 
});