AJAX POST request in JSON login

Question

I'm trying to create a very simple login form using AJAX for server comunication and PHP as a server-side script. As a starting point I was just trying to send the login data to the server via JSON, but it already gave me issues.

Problem is, when I send the data with a POST request in AJAX my server doesn't seem to get anything and returns no data at all. Here's the HTML for the request:

<!DOCTYPE HTML>
<html>
<head>
<title> Login experiment </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

$(document).ready(function AjaxJSON() {
    $("form#loginForm").submit(function() {
        var username = $('#username').val();
        var password = $('#password').val();
        var jsonlogin = "{\"username\" : \"" + username + "\" , \"password\" : \"" + password + "\"}";
        var str = 'json=' + jsonlogin;
        $.ajax({
            type: 'POST',
            url: 'login.php',
            // URL of my PHP script
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: str,
            success: function(data) {
                alert("Data received!" + data);
            }
        });
        // ajax
        })
    })

</script>
</head>

<body>
<h1> LOGIN: </h1>
<form id="loginForm" name="loginForm" method="post" action="">
<input type="text" id="username" name="username"> USERNAME <br>
<input type="password" id="password" name="password"> PASSWORD <br>
<input type="submit" class="button positive">
</form>
</body>
</html>

This HTML code should simply send the request form (username+password) coded in a JSON string to the PHP script. The script is something like this:

<?php
$result = json_decode($_POST['json']);
echo $result->username;
echo " ";
echo $result->password;
?>

Why doesn't it show me any reply? Thank you in advance for your help :)

Don't try to build JSON by mashing together strings. Browsers have `JSON.stringify` — Quentin, Aug 31 '13 at 21:38

score 0 · Answer 1 · edited May 23 '17 at 10:25

Your main problem is that you are claiming that you are sending application/json; charset=utf-8. This is an issue for two reasons:

PHP doesn't have any build in methods for handling JSON encoded POST data so $_POST won't be populated
Your data isn't JSON. It is (improperly escaped) application/x-www-form-urlencoded data (which includes a string of (improperly escaped) JSON as one of its pieces of data)

If you want to send JSON, then:

Build it using JSON.stringfy not by mashing together strings
Don't stick json= on the front of it
Get the data out of the POST body as per this question

If you aren't tied to JSON, then just use the standard methods for encoding form data:

Forget the jsonlogin line
Don't override the default contentType
Pass an object of your data to the data argument: data: { username: username, password: password }

Your next problem is that you are saying dataType: 'json' but your PHP is returning (invalid) HTML (that PHP is vulnerable to XSS attacks too).

Thank you very much for your reply.I will try the JSON.stringify method and check better the contentType and dataType fields :) — Nephilem Furt, Aug 31 '13 at 21:47

AJAX POST request in JSON login

1 Answers1