1

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

1 回答 1

1

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

<script>
    $('#emailForm').submit(submitForm);
</script>
于 2013-07-03T00:57:06.130 回答