JSON with the HTTP Content-Type Header

Problem

For fear of the unknown, I’ve always tried to avoid using the majority of the HTTP protocol’s features.

But I told myself that today I’m going to face my fears and start utilizing headers on purpose. I’ve been attempting to transmit json data to the browser and immediately use it. For example, suppose I have the following Ajax handler code on ready state 4:

function ajaxHandler(response){
    alert(response.text);
}

In my PHP code, I’ve also set the content-type header:

header('Content-Type: application/json');
echo json_encode(array('text' => 'omrele'));

When the browser is explicitly told that the incoming data is application/json, why can’t I access the property straight from the handler function?

Asked by php_nub_qq

Solution #1

The Content-Type header serves only to provide information to your application. It makes no difference to the browser what it is. The data from the AJAX call is simply returned by the browser. You’ll have to parse it yourself if you want it to be JSON.

The header is present so that your programme can figure out what data has been returned and how to handle it. Look at the header and, if application/json is there, parse it as JSON.

This is how jQuery functions. If you don’t tell it what to do with the output, it will figure it out based on the Content-Type.

Answered by Rocket Hazmat

Solution #2

The content header is merely the Content-Type: application/json. The content header simply specifies the type of returned data, for example: JSON,image(png,jpg,etc. ),html.

Keep in mind that JSON is an array or object in JavaScript. Instead of alert, use console.log to display all of the data:

alert(response.text); // Will alert "[object Object]" string
console.log(response.text); // Will log all data objects

Add single quotation marks (‘) if you want to alert the original JSON content as a string:

echo "'" . json_encode(array('text' => 'omrele')) . "'";
// alert(response.text) will alert {"text":"omrele"}

Use single quotations instead of double quotes. Because JSON uses double quotes on each value and key, it will mislead JavaScript:

echo '<script>var returndata=';
echo '"' . json_encode(array('text' => 'omrele')) . '"';
echo ';</script>';

// It will return the wrong JavaScript code:
<script>var returndata="{"text":"omrele"}";</script>

Answered by Among Amrul

Solution #3

On the front end, the code below allows me to return a JSON object for JavaScript.

My template code

template_file.json

{
    "name": "{{name}}"
}

Python backed code

def download_json(request):
    print("Downloading JSON")
    # Response render a template as JSON object
    return HttpResponse(render_to_response("template_file.json",dict(name="Alex Vera")),content_type="application/json")    

File url.py

url(r'^download_as_json/$', views.download_json, name='download_json-url')

For the front end, there is jQuery code.

  $.ajax({
        url:'{% url 'download_json-url' %}'        
    }).done(function(data){
        console.log('json ', data);
        console.log('Name', data.name);
        alert('hello ' + data.name);
    });

Answered by Alex Vera

Solution #4

This is ancient, but it works for me in PHP8 if the charset is set to example.

header('Content-Type: application/json; charset=utf-8');
echo json_encode(array('text' => 'eggs'));

Answered by Ncoder

Solution #5

When the response header defined the content-type as ‘text/html,’ I recently ran into a problem with this and a Chrome addon that was corrupting a JSON stream.

According to reports, extensions can and will exploit the response header to change the content before it is processed by the browser.

The problem was resolved by changing the content-type.

Answered by LANimation Big Bad Apps

Post is based on https://stackoverflow.com/questions/20620300/http-content-type-header-and-json