提交表单 ajax symfony答案

【问题标题】：submit form ajax symfony提交表单 ajax symfony
【发布时间】：2015-10-09 15:38:12
【问题描述】：

我想使用 ajax 和 symfony 保存一个实体。但总是我得到一个错误。这是我的代码

<form id="form"  class="full_form" {{form_enctype(form)}} action="{{ path('add_contact') }}" method="post" >
<div class="left small_width">

    <div class="section-title">Ajout d'un contact</div>
    <span>Les champs suivis d’une étoile sont obligatoires</span>
    {{ form_widget(form.name,{ 'attr': {'maxlength': '50','placeholder':'placeholder.nom'|trans} }) }}
    {{ form_widget(form.lastName, { 'attr': {'maxlength': '50','placeholder':'placeholder.prenom'|trans} }) }}
    {{ form_widget(form.countryId,{ 'attr': {'maxlength': '50','placeholder':'placeholder.contact.country'|trans} }) }}
    {{ form_widget(form.gsmPrimary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.gsmPrimary'|trans} }) }}
    {{ form_widget(form.gsmSecondary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.gsmSecondary'|trans} }) }}
    {{ form_widget(form.landlinePrimary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.landlinePrimary'|trans} }) }}
    {{ form_widget(form.landlineSecondary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.landlineSecondary'|trans} }) }}
    {{ form_widget(form.faxPrimary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.faxPrimary'|trans} }) }}
    {{ form_widget(form.faxSecondary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.faxSecondary'|trans} }) }}
    {{ form_widget(form.streetNumber) }}

在我的 java 脚本代码中：

<script>
    initAjaxForm();
</script>

在我的 main.js 中

     function initAjaxForm()
    {
        $('body').on('submit','full_form',function(e) {


 e.preventDefault();

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize()
        })
            .done(function (data) {
                if (typeof data.message !== 'undefined') {
                    alert(data.message);
                }
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                if (typeof jqXHR.responseJSON !== 'undefined') {
                    if (jqXHR.responseJSON.hasOwnProperty('form')) {
                        $('#form_body').html(jqXHR.responseJSON.form);
                    }

                    $('.form_error').html(jqXHR.responseJSON.message);

                } else {
                    alert(errorThrown);
                }

            });

    });
}

最后在我的控制器中。创建动作如下所示。

    public function createAction(Request $request)
    {

 if (!$request->isXmlHttpRequest()) {
    return new JsonResponse(array('message' => 'You can access this only using Ajax!'), 400);
}
        $contact = new Contact();
        $form = $this->createForm(new ContactType(), $contact);


        $form->handleRequest($request);

         if ($form->isValid()) {
            $em = $this->getDoctrine()->getManager();
               $em->persist($contact);
           // $em->persist($label);
            $em->flush();
             return new JsonResponse(array('message' => 'Success!'), 200);

        }
  $response = new JsonResponse(
            array(
                'message' => 'Error',
                'form' => $this->renderView('MyBundle:Contact:new.html.twig',
                    array(
                        'entity' => $contact,
                        'form' => $form->createView(),
                        'form2' => $form2->createView()
                    ))), 400);

        return $response;

但我总是收到错误消息，“您只能使用 ajax 访问它”。

请举一个例子，向我们展示如何使用 ajax 发送表单。我尝试了在网上找到的两个示例，但结果始终相同。

【问题讨论】：

看起来您的 javascript 代码没有运行。在像 Firebug 的一个或任何类似工具这样的控制台上检查 javascript 错误。例如，我在 $('body').on('submit','full_form',function(e) { 中看到一个错字，您忘记在“full_form”之前添加一个“.”。

标签： ajax forms symfony form-submit

【解决方案1】：

您可以使用ajaxSubmit 提交您的表单，如下所示：

$('input[type="submit"]').click(function () {
    $('#form').submit(function(e){
        e.preventDefault();
        $(this).ajaxSubmit(
        {
            url: "{{ path('add_contact') }}",
            type: "POST",
            success: function (result)
            {
               $('#form_body').html(result);
            }
        });
    });
});

或者您也可以像这样提交表单：

$('input[type="submit"]').click(function () {
        $('#form').submit(function(e){
            e.preventDefault();
            $.ajax(
            {
                url: "{{ path('add_contact') }}",
                type: "POST",
                data: $('#form').serialize(),
                success: function (result)
                {
                   $('#form_body').html(result);
                }
            });
        });
    });

希望有帮助

【讨论】：

【解决方案2】：

$('body').on('submit','.full_form',function(e) { ... }

full_form 应该以点为前缀。

但请尝试测试您的 javascript 脚本是否像 viktor77 向您建议的那样运行。

【讨论】：