En-tête de type de contenu HTTP et JSON

J'ai toujours essayé d'éviter d'utiliser la plupart des propriétés du protocole HTTP par peur de l'inconnu.

Cependant, je me suis dit que je vais affronter la peur aujourd'hui et commencer à utiliser les en-têtes à dessein. J'ai essayé d'envoyer des jsondonnées au navigateur et de les utiliser immédiatement. Par exemple, si j'ai une fonction de gestionnaire Ajax sur l'état prêt 4 qui ressemble à ceci:

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

Et j'ai défini l'en-tête de type de contenu dans mon code PHP:

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

Pourquoi ne puis-je pas accéder directement à la propriété à partir de la fonction de gestionnaire, alors que le navigateur est clairement informé que les données entrantes sont application/json?

L'en- Content-Typetête est simplement utilisé comme information pour votre application. Le navigateur ne se soucie pas de ce que c'est. Le navigateur vous renvoie simplement les données de l'appel AJAX. Si vous souhaitez l'analyser en tant que JSON, vous devez le faire vous-même.

L'en-tête est là pour que votre application puisse détecter quelles données ont été renvoyées et comment elle doit les gérer. Vous devez regarder l'en-tête, et si c'est application/jsonalors l'analyser comme JSON.

C'est en fait ainsi que fonctionne jQuery. Si vous ne lui dites pas quoi faire avec le résultat, il utilise Content-Typepour détecter ce qu'il faut en faire.

Content-Type: application/jsonest juste l'en-tête du contenu. L'en-tête de contenu est juste une information sur le type de données renvoyées, ex :: JSON, image (png, jpg, etc.), html.

Gardez à l'esprit que JSON en JavaScript est un tableau ou un objet. Si vous voulez voir toutes les données, utilisez console.log au lieu d'alerte:

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

Si vous souhaitez alerter le contenu JSON d'origine sous forme de chaîne, ajoutez des guillemets simples ('):

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

N'utilisez pas de guillemets doubles. Cela confondra JavaScript, car JSON utilise des guillemets doubles sur chaque valeur et clé:

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>

Le code ci-dessous m'aide à renvoyer un objet JSON pour JavaScript sur le front-end

Mon code de modèle

template_file.json

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

Code soutenu par Python

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")    

Fichier url.py

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

code jQuery pour le frontal

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