jQuery_jquery를 사용하여 비동기적으로 json 데이터를 얻는 2가지 방법

이 기사의 예에서는 jQuery가 json 데이터를 비동기식으로 가져오는 두 가지 방법을 설명합니다. 이는 웹 프로그램 개발에서 매우 실용적인 가치가 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 방법은 다음과 같습니다.

일반적으로 jQuery가 json 데이터를 비동기적으로 가져오는 방법에는 두 가지가 있습니다. 하나는 $.getJSON 메서드이고 다른 하나는 $.ajax 메서드입니다. 이 문서에서는 이 두 가지 방법을 사용하여 json 데이터를 비동기적으로 얻은 다음 이를 페이지에 추가합니다.

루트 디렉터리에 data.json 파일을 만듭니다.

{
  "one" : "Hello",
  "two" : "World"
}

1. $.getJSON 메소드를 통해 json 데이터를 얻습니다

  <script src="Scripts/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.getJSON('data.json', function(data) {
        var items = [];
        $.each(data, function(key, val) {
          items.push('<li id="' + key + '">' + val + '</li>');
        });
        $('<ul/>', {
          'class': 'list',
          html: items.join('')
        }).appendTo('body');
      });
    });
  </script>

2. $.ajax 방식으로 json 데이터 얻기

  <script src="Scripts/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.ajax({
        url: 'data.json',
        dataType: 'json',
        success: function(data) {
          var items = [];
          $.each(data, function(key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
          });
          $('<ul/>', {
            'class': 'list',
            html: items.join('')
          }).appendTo('body');
        },
        statusCode: {
          404: function() {
            alert("没有找到相关文件~~");
          }
        }
      });
    });
  </script>

요약: $.getJSON 메서드와 $.ajax 메서드를 사용하면 동일한 효과를 얻을 수 있습니다. 그러나 비동기 획득 프로세스를 보다 세부적으로 제어하려면 $. 아약스 방식.

저는 이 기사에 설명된 내용이 모든 사람의 jQuery 프로그래밍에 대한 특정 참조 가치를 가지고 있다고 믿습니다.