HTTP Content-TypeヘッダーとJSON

私はいつも、未知のものを恐れるために、HTTPプロトコルのプロパティのほとんどを使用しないようにしています。

しかし、今日は恐怖に直面し、意図的にヘッダーを使用し始めると自分に言い聞かせました。私はjsonブラウザにデータを送信してすぐにそれを使用しようとしています。たとえば、準備状態4に次のようなAjaxハンドラー関数があるとします。

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

そして、PHPコードにcontent-typeヘッダーを設定しました。

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

ブラウザーに着信データがあることが明確に通知されているのに、ハンドラー関数からプロパティに直接アクセスできないのはなぜapplication/jsonですか？

Content-Typeヘッダは、ちょうどあなたのアプリケーションのための情報として使用されています。ブラウザはそれが何であるかを気にしません。ブラウザーはAJAX呼び出しからのデータを返すだけです。JSONとして解析する場合は、自分で行う必要があります。

ヘッダーはそこにあるので、アプリは返されたデータとその処理方法を検出できます。ヘッダーを確認する必要がありapplication/jsonます。ヘッダーの場合は、JSONとして解析します。

これがjQueryの実際の動作方法です。結果の処理方法を指定しない場合は、Content-Typeを使用して処理方法を検出します。

Content-Type: application/json単なるコンテンツヘッダーです。コンテンツヘッダーは、返されるデータのタイプに関する情報だけです。例:: JSON、image（png、jpg、etc ..）、html。

JavaScriptのJSONは配列またはオブジェクトであることを覚えておいてください。すべてのデータを表示するには、アラートの代わりにconsole.logを使用します。

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

元のJSONコンテンツを文字列として通知する場合は、単一引用符（ '）を追加します。

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

二重引用符は使用しないでください。JSONは各値とキーに二重引用符を使用するため、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>

以下のコードは、フロントエンドでJavaScriptのJSONオブジェクトを返すのに役立ちます

私のテンプレートコード

template_file.json

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

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

ファイルurl.py

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

フロントエンドのjQueryコード

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