Why sending data by Ajax jQuery fail

Question

I'm trying to create a pop-up form login with Ajax jQuery, but It's always fail to send data. I've many ways on Internet that I can find but nothing change. Please take a look and help me. Thanks so much: This is my form:

<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>

This is my 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");
    }); 
});

And this is 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"));
    }

}

I'm working on Laravel framework so my url is defined:

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

Thanks again for your time

Answer 1

You need to pass the CSRF token in order for Laravel to process the request. There are a few ways to do this - try this one:

Form:

<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");
    }); 
});

You should now be able to access the submitted data in your controller with $request->all().