Question

我正在使用Symfony2开发一个简单的博客应用程序我想通过ajax检查登录数据：

如果数据正确 - ＆gt;转发到另一页
如果不是 - ＆gt;以400状态回复并为表单设置动画

我的问题是，JQuery发送的请求似乎不是XHR。

HTML：

<form id="logfo" action="{{path('Login_Ajax')}}" method="POST">
    <p> Name </p>
    <input type="text" id="logname"> </br>
    <p> Password </p>
    <input type="text" id="logpass"> </br>
    <input type="submit" value="Log In">
</form>

使用Javascript：

$(document).ready(function() {
    //listen for the form beeing submitted
    $("#logfo").submit(function(){
        var url = $("#logfo").attr("action");
        //start the post
        $.post(url,{Name:$("#logname").val(),
            Password:$("#logpass").val()}, 
            function(data){
                if(data.responseCode==400) {
                    //animate the Form
                    var fo=$("#logfo");
                    fo.animate({left:'+=25px'}, "fast");
                    fo.animate({left:'-=50px'}, "fast");
                    fo.animate({left:'+=50px'}, "fast");
                    fo.animate({left:'-=25px'}, "fast");
                }
        });
    }); 
});

的routing.yml：

Login_Ajax:
pattern: /thefitthing/logjax
defaults: {_controller: FitcompTheFitThingBlogBundle:Ajax:login }
requirements:
    _method:  POST

出于测试原因，我更换了用于将请求与数据进行比较的代码来自数据库的简单if-terms 控制器：

class AjaxController extends Controller {

    public function logInAction()
    {
        $request = $this->getRequest();
        if ($request->isXmlHttpRequest()) { 
            $name=$request->request->get('Name');
            if($name == "page") return new Response("",400);
            if($name == "plant") return $this->redirect($this->generateUrl('Thanks_Page'));
        }
        else return $this->render('FitcompTheFitThingBlogBundle:Blog:test.html.twig', array('hint' => "noXHR"));
    }
}

Answer 1

您的submit处理程序不会阻止浏览器提交表单，因此您的XHR请求永远不会有机会完成（浏览器只会先执行常规POST）。您只需删除$.post电话就可以确认这一点 - 根本不会有任何行为上的差异。

通过阻止默认操作来解决此问题：

$("#logfo").submit(function(event) {
    event.preventDefault();
    $.post(...);
});

Symfony2：JQuery请求不是XHR

1 个答案: