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

根据OP的要求发布答案，因为这导致了答案。

将您的第一行代码更改为：

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

匹配HTML中的id值。

然后，做一些初级调试。在Ajax调用之前放置一个console.log("got here")，看看在单击表单中的提交按钮时是否在调试日志中看到了这一点。这将告诉您是否甚至调用了.submit()处理程序，并告诉您下一步该在哪里查看。

Answer 2

在查看可能导致此问题的代码时，我会想到一些事情：

正如jfriend00在评论＃2和＃3中所解释的不是问题

$('contact_form')指的是元素<contact_form>。是存在还是打算引用课程$('.contact_form')或身份$('#contact_form')？

url: $(this).attr('action')

$(this)

实际上并不存在，因此您需要在ajax调用之前定义变量并在其中存储this。 var that=this然后将该行更改为url: $(that).attr('action')
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');
        }
    });
});

$ .ajax（）成功函数不起作用

2 个答案: