$ .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'); 
     } 
    }); 
});