HTTP 컨텐츠 유형 헤더 및 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/jsonJSON으로 구문 분석해야합니다.

이것이 실제로 jQuery의 작동 방식입니다. 결과로 수행 할 작업을 알려주지 않으면를 사용하여 Content-Type수행 할 작업을 감지합니다.

Content-Type: application/json컨텐츠 헤더 일뿐입니다. 컨텐츠 헤더는 반환 된 데이터 유형에 대한 정보입니다 (예 : ex :: JSON, image (png, jpg 등), 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}}"
}

파이썬 지원 코드

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);
    });