首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >AJAX的工作原理

AJAX的工作原理
EN

Stack Overflow用户
提问于 2014-01-09 03:23:20
回答 1查看 439关注 0票数 1

我是AJAX的新手。但我正在尝试了解这是如何工作的。我正在使用symfony2与fos用户捆绑,我想实现AJAX到我的登录表单。所以我这样做:

login.html.twig

代码语言:javascript
运行
复制
<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>

然后在提交时转到这个文件:-

代码语言:javascript
运行
复制
<?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 url中显示:

代码语言:javascript
运行
复制
{"success":false}

但我想当结果为假,然后返回相同的表单,我试图登录(我的意思是相同的弹出式div)?

我的代码ajax或动作返回有什么问题?或者我返回的是正确的?

EN

回答 1

Stack Overflow用户

发布于 2014-01-09 05:09:23

window.location将重新加载整个页面。我想这不是您想要的结果,因为您正在使用AJAX ( AJAX的漏洞在于不重新加载页面),如果登录不成功,您可能会显示一条错误消息。我建议您在html表单中添加一个错误div

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

然后在ajax调用中显示它或添加一个重要的消息错误:

代码语言:javascript
运行
复制
       if (data.sucess == false) {
                $('.tab-1').prepend('<div />').html(data.message);
            } else {
                $('.error').show();
            }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21004696

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档