JavaScript

Client-side AJAX using JSON

Client-side AJAX using JSON

Using real JSON content-type to request and respond with

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·

2 min read

Very often, many developers, including myself in the past, normally all along we were using jQuery's $.ajax and sending in JSON with dataType: 'json' without really sending the content-type as a JSON string which is supposed to be application/json - instead we were actually sending in a regular POST (application/x-www-urlencoded) and decoding it from the PHP side as $_POST.

So, if you have this script, post.php, in a folder :

<?php
$post_body = $_POST;
echo json_encode($post_body);
?>

and in jqurey-ajax.html :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>jQuery AJAX</title>     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> 
</head> 
<body> 

<script>
let url = "http://localhost:8989/post.php";

const formData = new FormData();
formData.append("username", "john");
formData.append("password", "a5y6e7Chk65kmFWeK5F5");

const run = async() =>
{   
    $.ajax({
        type: 'ajax',
        method: 'post',
        url: url,
        data: {username: "john", password: "a5y6e7Chk65kmFWeK5F5"},
        async: false,
        dataType: 'json',
        success: function(result) { console.log(result); },
        error: function() { console.log("error"); }
    });
}

run();

</script>
</body>
</html>

we get :

The Real JSON

For sending in non-JSON requests

Have this script, run.php, in the same folder :

<?php
$post_body = file_get_contents('php://input');
parse_str($post_body, $queryArray);
print_r($queryArray);
?>

If you have this HTML file in the same folder as client.html

let url = "http://localhost:8989/run.php";

const formData = new FormData();
formData.append("username", "john");
formData.append("password", "a5y6e7Chk65kmFWeK5F5");

const run = async() =>
{   
    let response = await fetch(url,
        {
            method: "POST",
            headers:
            {
                "Content-Type": "application/x-www-urlencoded",                
            },
            body: new URLSearchParams(formData),            
        });
}

run();

If you run `php.exe -S localhost:8989`, you should get this in the response of the URL request you'll see in console :

Array
(
    [username] => john
    [password] => a5y6e7Chk65kmFWeK5F5
)

For sending in JSON requests

run.php :

<?php
$post_body = file_get_contents('php://input');
print_r($post_body);
?>

client.html :

let url = "http://localhost:8989/run.php";

const formData = new FormData();
formData.append("username", "john");
formData.append("password", "a5y6e7Chk65kmFWeK5F5");

const run = async() =>
{   
    var object = {};
    formData.forEach((value, key) => object[key] = value);

    let response = await fetch(url,
        {
            method: "POST",
            headers:
            {                
                "Content-Type":"application/json",
            },            
            body: JSON.stringify(object)
        });
}

run();

We get :

username    "john"
password    "a5y6e7Chk65kmFWeK5F5"

I haven't echoed a JSON string to the output in the above 2 examples because I just wanted show how it's communicated - I'll leave it up to you to print a JSON string on the server-side for the client to fetch as response.

Ajaxjsonfetchformdata