Question

我一直在努力解决这个问题，并且尚未在网上找到任何真正的解决方案。我有一个允许用户输入他们的电子邮件的表单，然后在他们输入后淡出并被另一个表单替换。我使用ajax将表单中的数据提交到symfony2控制器，该控制器在数据库中对其进行故事并发送响应。但是，响应最终只是将我发送到显示响应数据的空白页面，而是让我保持在同一页面上，只是根据需要淡化框。我认为我的问题在于如何设置控制器操作和路由文件。

修改

现在问题是当我点击提交按钮时没有任何反应。没有任何内容发送到控制器，因此没有任何内容存储，也没有给出响应。我改变的是基于@PaulPro的回答，附加了

<script> $('#emailForm').submit(submitForm); </script>

到html页面的末尾。提前感谢您的帮助和见解！

控制器有2个相关的操作，一个用表格呈现TWIG模板，另一个用于处理ajax表单提交并返回响应。

public function emailAction()
{
    return $this->render('Bundle:email.html.twig');
}

public function submitEmailAction()
{

    $em = $this->getDoctrine()-> getEntityManager();

    $email = new Email();

    $request = $this->getRequest();

    $emailVar = $request->request->get('emailSignup');

    $email -> setEmail($emailVar);

    $em->persist($email);
    $em->flush();

    $return=array("responseCode"=>200);
    $return = json_encode($return);

    return new Response($return, 200, array('Content-Type'=>'application/json'));

}

这是这些行动的路线，很可能是这一切的罪魁祸首：

Bundle_email:
pattern:  /email
defaults: { _controller: Bundle:email }
requirements:
    _method:  GET

Bundle_submitEmail:
pattern:  /submitEmail
defaults: { _controller: Bundle:submitEmail }
requirements:
    _method:  POST

然后是email.html.twig模板和ajax脚本：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="{{asset('css/styles.css')}}" rel="stylesheet" type="text/css"  />
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">

function submitForm(){
    var emailForm = $(this);
    var path = "{{path('Bundle_submitEmail')}}"

    $.ajax ( {
        type: 'POST',
        url: $("#emailForm").attr("action"),
        emailSignup: $("#emailId").val(), 
        success: function(data){

        if(data.responseCode==200 ){
            $('.email-signup-form').fadeOut();          
            $('.share-form').delay(500).fadeIn();
        }
        }

      });

 return false;
 }</script>
</head>

<body>
      <form id="emailForm" action="{{path('Bundle_submitEmail')}}" method="POST" class="email-signup-form">
        <input type="email" placeholder="e-mail address" name="emailSignup" id="emailId" required="true"/>
<input type="submit" value="Go">
      </form>
      <form class="share-form">

      </form>
<script> $('#emailForm').submit(submitForm); </script>

</body>
</html>

Answer 1

你永远不会调用submitForm（告诉浏览器使用AJAX而不是整页加载的函数）。只需在身体末端添加一个脚本，如下所示：

<script>
    $('#emailForm').submit(submitForm);
</script>

使用AJAX路由Symfony2 TWIG模板

1 个答案: