2014-01-08 41 views
1

我是AJAX新手。但我正在努力學習這是如何工作的。 我正在使用symfony2與fos用戶包,我想實現AJAX到我的登錄表單。 所以我這樣做:如何AJAX工作

login.html.twig

<script> 
$('#_submit').click(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type  : $('form').attr('method'), 
     url   : $('form').attr('action'), 
     data  : $('form').serialize(), 
     success  : function(data, status, object) { 
      if (data.sucess == false) { 
       $('.tab-1').prepend('<div />').html(data.message); 
      } else { 
       window.location.href = data.targetUrl; 
      } 
     } 
}); 
</script> 
<div id="tab-1" class="login_form"> 
<form action="{{ path("fos_user_security_check") }}" role="form" method="post"> 
<label for="username"><strong>User Name/Email Address</strong> 
    <input type="text" id="username" name="_username" value="{{ last_username }}" required="required" /> 
</label> 
<label for="password"><strong>Password</strong> 
    <input type="password" id="password" name="_password" required="required" /> 
</label> 
<label for="password"><strong>Remember Me</strong> 
    <input type="checkbox" id="remember_me" name="_remember_me" value="on" /> 
</label> 
<input type="submit" class="submitBut" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" /> 
</form> 
</div> 

,並提交時,然後去這個文件: -

<?php 

namespace XXXX\UserBundle\Handler; 

use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface; 
use  Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface; 
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface; 
use Symfony\Component\Routing\RouterInterface; 
use Symfony\Component\HttpFoundation\Request; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Component\HttpFoundation\RedirectResponse; 
use Symfony\Component\Routing\Router; 
use Symfony\Component\Security\Core\SecurityContext; 
use Symfony\Component\Security\Core\Exception\AuthenticationException; 
use Symfony\Component\Translation\Translator; 
use Symfony\Component\Translation\MessageSelector; 

class AuthenticationHandler implements AuthenticationSuccessHandlerInterface,  AuthenticationFailureHandlerInterface 
{ 

protected $router; 
protected $security; 
protected $userManager; 
protected $service_container; 

public function __construct(RouterInterface $router, SecurityContext $security, $userManager, $service_container) 
{ 
    $this->router = $router; 
    $this->security = $security; 
    $this->userManager = $userManager; 
    $this->service_container = $service_container; 

} 
public function onAuthenticationSuccess(Request $request, TokenInterface $token) { 
    if ($request->isXmlHttpRequest()) { 
     $result = array('success' => true); 
     $response = new Response(json_encode($result)); 
     $response->headers->set('Content-Type', 'application/json'); 
     return $response; 
    } 
    else { 
     // Create a flash message with the authentication error message 
     $request->getSession()->getFlashBag()->set('error', $exception->getMessage()); 
     $url = $this->router->generate('fos_user_security_login'); 

     return new RedirectResponse($url); 
    } 

    return new RedirectResponse($this->router->generate('anag_new')); 
} 
public function onAuthenticationFailure(Request $request, AuthenticationException $exception) { 
    $translator = new Translator('fr_FR'); 
    //$result = array(
    // 'success' => false, 
    // 'function' => 'onAuthenticationFailure', 
    // 'error' => true, 
    // 'message' => $this->translator->trans($exception->getMessage(), array(), 'FOSUserBundle') 
    //); 
    $result = array('success' => false); 
    $response = new Response(json_encode($result)); 
    $response->headers->set('Content-Type', 'application/json'); 
    return $response; 
} 
} 

當提交表單,然後告訴我在login_check網址:

{"success":false} 

但我想當結果錯誤,然後返回相同的形式,我在哪裏試試登錄(我的意思是相同的彈出div)?

我的代碼ajax或操作返回有什麼問題? 或者我回復正確?

回答

1

window.location將重新加載整個頁面。這不是我想要的結果,因爲您使用AJAX(AJAX的缺點是不重新加載頁面),而如果登錄不成功,則可能會顯示錯誤消息。 我建議你在你的HTML表單中添加一個錯誤的div

<div class='error' style="display:none" > ooups an erro occured </div>

然後在Ajax調用只顯示或添加一個顯著消息錯誤:

 if (data.sucess == false) { 
       $('.tab-1').prepend('<div />').html(data.message); 
      } else { 
       $('.error').show(); 
      }