javascript - 为什么通过 Ajax jQuery 发送数据失败

Question

我正在尝试使用 Ajax jQuery 创建一个弹出式表单登录，但它总是无法发送数据。我在 Internet 上有很多方法可以找到，但没有任何改变。请看看并帮助我。非常感谢: 这是我的表格:

<form id="loginform" name="loginform" method="POST">
    {{ csrf_field() }}
    <div class='modal-body-left' >
        <div class="form-group">
            <input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field">
            <i class="fa fa-user login-field-icon"></i>
        </div>
        <div class="form-group">
            <input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field">
            <i class="fa fa-lock login-field-icon"></i>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu
            </label>
            <a href="#" style="float: right;">Quên mật khẩu?</a>
        </div>
        <button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton"  style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button>
    </div>
</form>

这是我的js:

$("#loginbutton").click(function(event) {
    event.preventDefault();
    var username = $("#username").val();
    var password = $("#password").val();
    var data ={"email":username, "password":password};
    alert(data.email);
    // alert(data.password);
    $.ajax(
        {
            url: '{{url('/')}}/loginHandling',
            type: 'POST',
            data: {'email': "ruoitrau95@gmail.com", 'password':"tuyen12345"},
            dataType: 'json',
            success: function(data)
            {
                alert(data);
                alert("done");
            }   
        }
    )
    .fail(function(data) {
        alert("fail");
    }); 
});

这是 Controller :

public function loginHandling() {

    $email = Input::get('email');
    $password = Input::get('password');
    $check $this->pages->checkLogin($email, $password);
    echo "alert(In loginHandling)";
    if ($check) {
        $name = $this->pages->getNameFromMail($email);
        Session::put('logined', true);
        Session::put('email', $email);
        Session::put('name', $name);

        die json_encode(array("success"=>"true"));
    } else {
        die json_encode(array("success"=>"false"));
    }

}

我正在使用 Laravel 框架，所以我的 url 已定义:

Route::post('/loginHandling',['as'=>'loginHandling','uses'=>'LoginController@loginHandling']);

再次感谢您的宝贵时间

Answer 1

您需要传递 CSRF token 以便 Laravel 处理请求。有几种方法可以做到这一点 - 试试这个:

表格:

<meta name="_token" content="{{ csrf_token() }}" />            
<form id="loginform" name="loginform" method="POST">
    <div class='modal-body-left' >
        <div class="form-group">
            <input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field">
            <i class="fa fa-user login-field-icon"></i>
        </div>
        <div class="form-group">
            <input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field">
            <i class="fa fa-lock login-field-icon"></i>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu
            </label>
            <a href="#" style="float: right;">Quên mật khẩu?</a>
        </div>
        <button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton"  style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button>
    </div>
</form>

Javascript:

$("#loginbutton").click(function(event) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });
    event.preventDefault();
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax(
        {
            url: '{{url('/')}}/loginHandling',
            type: 'POST',
            data: {'email': username, 'password': password},
            dataType: 'json',
            success: function(data)
            {
                alert(data);
                alert("done");
            }   
        }
    )
    .fail(function(data) {
        alert("fail");
    }); 
});

您现在应该能够使用 $request->all() 访问 Controller 中提交的数据。