source

jax가 있는 파일에서 JSON 개체를 로드하려면 어떻게 해야 합니까?

ittop 2023. 10. 24. 21:33
반응형

jax가 있는 파일에서 JSON 개체를 로드하려면 어떻게 해야 합니까?

저는 데이터 전송을 위해 JSON을 사용하고 있습니다.

스크립트에 하나의 JSON 개체만 포함된 Ajax 파일을 읽으려면 HTML 페이지에서 무엇이 필요합니까?

저도 jQuery가 필요한가요, 아니면 그 JSON 파일을 Ajax와 함께 로딩하는 것이 가능한가요?

브라우저마다 다른가요?

라이브러리는 필요 없습니다. json 파일을 가져와 파싱하는 바닐라 자바스크립트로 모든 것을 이용할 수 있습니다.

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

// this requests the file and executes a callback with the parsed result once
//   it is available
fetchJSONFile('pathToFile.json', function(data){
    // do something with your data
    console.log(data);
});

가장 효율적인 방법은 일반 자바스크립트를 사용하는 것입니다.

var a = new XMLHttpRequest();
a.open("GET","your_json_file",true);
a.onreadystatechange = function() {
  if( this.readyState == 4) {
    if( this.status == 200) {
      var json = window.JSON ? JSON.parse(this.reponseText) : eval("("+this.responseText+")");
      // do something with json
    }
    else alert("HTTP error "+this.status+" "+this.statusText);
  }
}
a.send();

과거에 Ajax는 브라우저마다 달랐습니다. 불행하게도 많은 사용자들이 여전히 사용하고 있는 오래된 브라우저를 지원해야 한다면 말입니다.이전 브라우저의 경우 브라우저 차이를 처리하려면 JQuery와 같은 라이브러리(또는 자체 등가 코드)가 필요합니다.어쨌든 초보자에게는 좋은 문서, 간단한 API, 빠른 시작을 위해 jQuery를 추천할 수 있지만 MDN은 자바스크립트 자체에도 도움이 됩니다(그리고 jQuery에 주로 의존하더라도 자바스크립트/DOM API를 점점 더 이해해야 합니다).

저는 ajax jquery를 사용하는 것을 선호합니다.쥬리는 삶을 훨씬 편하게 만들어줍니다.

예를 들어 서버 측에서 수행할 수 있는 작업은 php를 사용하고 있다고 가정합니다.

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    // if it's an ajax request

    $json['success'] = 1;
    $json['html'] = '<div id="test">..[more html code here].. </div>';
    echo json_encode($json);
}else{
    // if it's an non ajax request


}

클라이언트 측에서는 jquery ajax를 사용하여 다음 작업을 수행할 수 있습니다.

    $.ajax({
          type: "POST",
          url: "[your request url here]",
          data: { name: "JOKOOOOW OOWNOOO" },
          complete: function(e, xhr, settings){
              switch(e.status){
                  case 500:
                     alert('500 internal server error!');
                     break;
                  case 404:
                      alert('404 Page not found!');
                     break;
                  case 401:
                      alert('401 unauthorized access');     
                     break;       
              }
          }           
        }).done(function( data ) {
            var obj = jQuery.parseJSON(data)

            if (obj.success == 1){

                  $('div#insert_html_div').html(obj.html);

            }else if (obj.error == 1){


                            }


            // etc

        });

언급URL : https://stackoverflow.com/questions/14388452/how-do-i-load-a-json-object-from-a-file-with-ajax

반응형