집 > 기사 > 웹 프론트엔드 > Ajax로 Json 데이터를 읽는 방법

Ajax로 Json 데이터를 읽는 방법

php中世界最好的语言원래의: 2018-04-04 16:03:452766검색

이번에는 Json 데이터를 ajax로 읽는 방법을 알려드리겠습니다. ajax를 사용하여 Json 데이터를 읽을 때 주의사항은 무엇인가요?

이 기사에서는 Ajax를 사용하여 Json에서 데이터를 읽는 방법을 공유합니다.

1. 기본 지식

json이란 무엇인가요?

JSON은 JavaScript Object Notation(JavaScript Object Notation)을 나타냅니다.
JSON은 가벼운 텍스트 데이터 교환 형식입니다.
JSON은 언어 독립적입니다*
JSON은 자체 설명적이고 이해하기 쉽습니다.
JSON은 JavaScript 구문을 사용하여 데이터를 설명합니다. 객체이지만 JSON은 언어와 플랫폼에 독립적입니다. JSON 파서와 JSON 라이브러리는 다양한 프로그래밍 언어를 지원합니다.
JSON - JavaScript 개체로 변환

JSON 텍스트 형식은 JavaScript 개체를 생성하는 코드와 구문상 동일합니다.

이러한 유사성으로 인해 JavaScript 프로그램은 내장된 eval() 함수를 사용하여 파서 없이도 JSON 데이터에서 기본 JavaScript 개체를 생성할 수 있습니다.

2. Json에서 데이터 읽기

먼저 내용이 포함된 Json 파일을 작성했습니다. 형식에 주의하세요.

그림 1 json 파일 작성

그런 다음 html 코드를 작성하고 ajax를 참조합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用AJAX异步读取json</title>
<script src="ajax.js">
</script>
<script>
  window.onload=function()
  {
    /*获得按钮*/
    var aBtn=document.getElementById('btn1');
    //给按钮添加点击事件
    aBtn.onclick=function()
    {
      //调用ajax函数
      ajax('data.json',function(str){
        //将JSON 数据来生成原生的 JavaScript 对象
        var arr=eval(str);
        alert(arr[0].b);
    });
    };
  };
</script>
</head>
<body>
读取json里面的数据 <br />
<input id="btn1" type="button" value="读取json里面的数据" />
</body>
</html>

캡슐화된 AJAX 함수 코드는 다음과 같습니다.

/*
AJAX封装函数
url：系统要读取文件的地址
fnSucc：一个函数，文件取过来，加载完会调用
*/
function ajax(url, fnSucc, fnFaild)
{
  //1.创建Ajax对象
  var oAjax=null;
  if(window.XMLHttpRequest)
  {
    oAjax=new XMLHttpRequest();
  }
  else
  {
    oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2.连接服务器
  oAjax.open('GET', url, true);
  //3.发送请求
  oAjax.send();
  //4.接收服务器的返回
  oAjax.onreadystatechange=function ()
  {
    if(oAjax.readyState==4) //完成
    {
      if(oAjax.status==200)  //成功
      {
        fnSucc(oAjax.responseText);
      }
      else
      {
        if(fnFaild)
          fnFaild(oAjax.status);
      }
    }
  };
}

다음 단계는 파일 내용을 읽는 것입니다. 그 전에 한 가지 언급할 점은 AJAX가 서버에서 파일을 읽으므로 작성된 JSON은 파일입니다. 아마도 초보자가 접하게 되는 유일한 서버는 C:inetpubwwwrootaspnet_clientsystem_web일 것입니다. 이 경로 아래에 Json을 넣고 서버에 액세스하면 됩니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!