使用AJAX爲Symfony2 TWIG模板進行路由

我一直在爲此奮鬥了兩天，還沒有找到任何真正的在線解決方案。我有一個允許用戶輸入他們的電子郵件的表格，然後他們輸入後淡出並被另一個表格取代。我使用ajax將表單中的數據提交給symfony2控制器，該控制器在數據庫中對其進行故事報告併發送響應。但是，響應最終只是將我發送到顯示響應數據的空白頁面，而不是讓我保持在同一頁面上，只是根據需要淡入框中。我認爲我的問題是如何設置控制器操作和路由文件。使用AJAX爲Symfony2 TWIG模板進行路由

編輯

那麼現在的問題是，當我點擊提交按鈕沒有任何反應。沒有任何信息發送給控制器，因此沒有任何信息被存儲，也沒有任何響應。我改變的是基於@PaulPro的回答，將

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

添加到html頁面的末尾。預先感謝您的幫助和見解！

控制器有兩個相關操作，一個是用表單呈現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>

來源

2013-07-03 tsHunter

您永遠不會呼叫submitForm（該函數告訴瀏覽器使用AJAX而不是整頁加載）。只需在您的身體末端添加一個腳本，如下所示：

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

來源

2013-07-03 00:57:06 Paulpro

感謝您的快速響應！雖然現在當我點擊提交按鈕時，根本沒有任何事情發生，所以我想我需要再看看我的ajax代碼。 – tsHunter

@BrianHunter不客氣。你嘗試檢查Javascript控制檯的錯誤？ – Paulpro

好了，他們的錯誤在這裏顯示不好，但它的500內部服務器錯誤，它指向jQuery的第5和第6行，然後我的代碼與url的留置權，也許它不喜歡symfony格式或路徑創建。不確定 – tsHunter

使用AJAX爲Symfony2 TWIG模板進行路由

回答

相關問題