Ajax로 Json 데이터를 읽는 방법
- php中世界最好的语言원래의
- 2018-04-04 16:03:452783검색
이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 Ajax로 Json 데이터를 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!