使用ajax提交symfony2表单

Am using Symfony2, doctrine2 and twig. Am trying submit a form using ajax. The ajax function always returns this message: "This is not ajax!". I didn't find the problem. I hope you can help me.
Twig code:

我正在使用Symfony2,doctrine2和twig。我正在尝试使用ajax提交表单。 ajax函数总是返回此消息:“这不是ajax!”。我没有发现问题。我希望你能帮助我。树枝代码:

<form id="form_newsletter" action="{{ path('portofolio_front_newsletter') }}" method="post" {{ form_enctype(newsletterForm) }}>
 <!-- form errors -->
 {{ form_errors(newsletterForm.email) }}
    <div class="input-group">
      {{ form_widget(newsletterForm.email, {'attr': {'class' : 'form-control email', 'placeholder' : 'Enter your email'} }) }} 
        {{ form_rest(newsletterForm) }}
          <span class="input-group-btn">
            <button class="btn btn-danger" id="btnSubmit" type="submit">Go!</button>
          </span>
     </div>
</form>

Jquery code:

<script type="text/javascript">
            $(document).ready(function() {
                $("#form_newsletter").submit(function(e) {
                    e.preventDefault();
                    var email = $('.email').val();
                    alert(email);
                    var DATA = 'email=' + email;
                    alert(DATA);
                    var url = $("#form_newsletter").attr("action");
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: DATA,
                        cache: false,
                        success: function(data) {
                            console.log(data);
                        }
                    });                       

                });
            });

</script>

Controller code:

public function newsletterAction(Request $request) {
    if ($request->isXMLHttpRequest()) {
        return new JsonResponse(array('data' => 'this is a json response'));
    }

    return new Response('This is not ajax!', 400);
}

2 个解决方案

#1

It seems your form get submitted normally after the ajax request is made, because the normal default submit event is triggered even though you have already issued a request. Have you tried to add :

在发出ajax请求后,您的表单似乎正常提交,因为即使您已经发出请求,也会触发正常的默认提交事件。你试过添加:

e.preventDefault():

in :

$("#frm_newsletter").submit(function(e) { 
   e.preventDefault();
   // rest of your code
}

? (note the e in the function parameters)

? (注意函数参数中的e)

#2

Your form id in html is form_newsletter. form id in JS is frm_newsletter.

您在html中的表单ID是form_newsletter。 JS中的form id是frm_newsletter。

Typo?

#1