使用 AJAX 路由 Symfony2 TWIG 模板答案

【问题标题】：Routing for Symfony2 TWIG templates with AJAX使用 AJAX 路由 Symfony2 TWIG 模板
【发布时间】：2013-07-03 00:53:57
【问题描述】：

我已经为此苦苦挣扎了几天，还没有在网上找到任何真正的解决方案。我有一个表单，允许用户输入他们的电子邮件，然后在他们输入后淡出并被另一个表单替换。我正在使用 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>

【问题讨论】：

标签： ajax symfony

【解决方案1】：

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

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

【讨论】：

感谢您的快速回复！虽然现在当我点击提交按钮时什么都没有发生，所以我想我需要再看看我的 ajax 代码。
@BrianHunter 不客气。您是否尝试过检查 Javascript 控制台是否有错误？
好吧，他们的错误在这里没有很好地显示，但它是一个 500 内部服务器错误，它指向 jquery 的第 5 和 6 行，然后是我的代码与 url 的留置权，也许它没有t 喜欢 symfony 格式或路径创建。不确定
也许可以试试data: {emailSignup: $("#emailId").val() },
@BrianHunter 没问题！我很高兴能帮上忙:)