CODEWITHSUNDEEP
phpjson
Sachin
Sachin

Reputation: 1698

Why we don't need dataType: "json" in AJAX call (conditionally)?

I noticed that we don't need to include dataType: "json" in our AJAX call if the server file is already in .json format, e.g.

index.html

$.ajax({
    url: "ajax/test.json",
    data: "id="+id,
    cache: false,
    type: "POST",
    success: function(response){
        // Some more stuff here...
    }
});

test.json

{ 
    "fname" : "Aileen", 
    "lname" : "Brown", 
    "email" : "[email protected]", 
    "phone" : "1234567890", 
    "country" : "USA" 
}

But if we have to fetch above content from a PHP file through MySQL database

index.html

$.ajax({
    url: "ajax/test.php",
    data: "id="+id,
    cache: false,
    type: "POST",
    dataType: "json",
    success: function(response){
        // Some more stuff here...
    }
});

test.php

<?php
$data = array(
                "fname"     => "Aileen",
                "lname"     => "Brown",
                "email"     => "[email protected]",
                "phone"     => "1234567890",
                "country"   => "USA"
            );

// Convert PHP array into JSON object
echo json_encode($data);
?>

The response from this server PHP file via AJAX call in web browser console is collected in the same JSON format as my test.json file has.

{"fname":"Aileen","lname":"Brown","email":"[email protected]","phone":"1234567890","country":"USA"}

Can anyone please explain me properly why using dataType: "json" is mandatory when the data has to be fetched from a PHP file rather than a JSON file if the format of data coming from server is identical?

Upvotes: 0

Views: 153

Answers (2)

Quentin
Quentin

Reputation: 944147

In short, this is because of a bug in your PHP code.

Any HTTP request or response with a body has a matching Content-Type in the headers to describe what type of data it is.

By default, jQuery will parse the response it gets according to the Content-Type header it came with. dataType causes it to ignore that header (and also set an Accept header on the request).

Most web servers these days are configured by default so that a file with a .json file extension gets a Content-Type: application/json header.

Any PHP program will output, again by default, a Content-Type: text/html header unless overridden using the header function.

Since your PHP doesn't include header("Content-Type: application/json") it tells the web browser that it is sending HTML and jQuery tries to parse the JSON as if it were HTML.

Upvotes: 3

Johannes
Johannes

Reputation: 1488

This is because the Content-Type sent in the header for a .json file is already application/json whereas a "normal" PHP file has text/html.

jQuery AJAX uses "Intelligent Guess" to determine the data type from the MIME type of the file if no dataType is set:

The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

(see https://api.jquery.com/jQuery.ajax/)

You can easily watch this behavior in your Developer Console (here I used Firefox's built-in version):

Example

Upvotes: 1

Related Questions