PHP post request always returns 400 when submitted with ajax

Question

I am trying to make a login, where the username and password is submitted to an API through AJAX. The problem is that it always says:

Warning: file_get_contents(http://example.com/api/login): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /classes/Login.php on line 20

However, if I cut out the jquery and just submit it as plain PHP, there is no problem and I get a "Status Code 200 OK" on the request.

My index.php :

    <form action="ajax/processLogin.php" method="post" name="loginform" id="loginform">
        <label for="user_name">Brugernavn</label>
        <input type="text" id="user_name" name="user_name" required>

        <label for="user_password">Kodeord</label>
        <input type="password" id="user_password" name="user_password" required>

        <input type="submit" id="login" name="login" value="Log ind">
    </form>

processLogin.php :

require_once "../classes/Login.php";
$login = new Login();

$params = array('brugernavn' => $_POST['user_name'], 'password' => $_POST['user_password']);

if($login->doLogin($params)){
    echo "success";
}
else{
    echo "Fail";
}

My Login.class.php :

    public function doLogin($params){
        $query = http_build_query($params);
        $contextData = array(
            'method' => 'POST',
            'header' => 'Connection: close\r\n' .
                        'Content-Type: application/x-www-form-urlencoded\r\n'.
                        'Content-Length: ' . strlen($query),
            'content' => $query
        );

        $context = stream_context_create(array('http' => $contextData));
        $data = file_get_contents('http://example.com/api/login', false, $context);

        $result = json_decode($data, true);

        if($result['success']){
            return true;
        }

        return false;
    }

My main.js file :

    $("#login").click(function(){

    var brugernavn = $("#user_name").val();
    var password = $("#user_password").val();

    if($.trim(brugernavn).length > 0 && $.trim(password).length > 0){
        $.ajax({
            url: 'ajax/processLogin.php',
            type: 'POST',
            data: 'brugernavn=' + brugernavn + '&password=' + password
        })
        .done(function(data) {
            console.log(data);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    }

    return false;
});

I can't really figure out what the problem is. It is probably something stupidly simple that I've overlooked

Answer 1

You forgot to send the data with your AJAX:

$.ajax({
    type: "POST",
    url: 'yoururlhere',
    data:{
        user_name: brugernavn,
        user_password: password,
    }
}).done(function(){

}).fail(function(){

}).always(function(){

});