PHP+ajax 는 뉴스 데 이 터 를 가 져 오 는 간단 한 예제 입 니 다.
Get 방식 으로 얻 은 정 보 는 문자열(responseText)입 니 다.
① JSON 대상 의 방법 을 이용 하여
stringify()
와parse()
방법 으로 문자열 과 대상 간 의 전환 을 할 수 있다.
var arr=[1,2,3];
var a={left:100};
//alert(JSON.stringify(a));//typeof JSON.stringify(arr) string
//JSON :'{"left":100}',
var s1="[1,2,3]";
var s2="{left:100}";
var s3='{"left":100}';
//alert(JSON.parse(s1));//--- [1,2,3]
//alert(JSON.parse(s2));//--- 。 JSON , :'{"left":100}'
alert(JSON.parse(s3).left);//--- Object Object
② ajax 가 서버 내용 을 가 져 오 는 인 스 턴 스:getNews.php 코드:
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news=array(
array("title"=>' ',"date"=>"2016-3-16"),
array("title"=>' " 8000 5000 "',"date"=>"2016-3-16"),
array("title"=>' " " 3 3 ',"date"=>"2016-3-16"),
array("title"=>' ',"date"=>"2016-3-16"),
array("title"=>' ',"date"=>"2016-3-16"),
array("title"=>' : ',"date"=>"2016-3-16"),
array("title"=>' 6500 ',"date"=>"2016-3-16"),
);
echo json_encode($news);
파일 getNews.php 는 브 라 우 저 에 다음 과 같이 표 시 됩 니 다.[{"title":"\u4e60\u8fd1\u5e73\u540c\u4ee3\u8868\u59d4\u5458\u5171\u5546\u56fd\u662f\u4e24\u4f1a\u7ec6\u8282 \u56fd\u5e73","date":"2016-3-16"},{"title":"\u674e\u514b\u5f3a\u7b54\u5982\u4f55\u89e3\u51b3\"\u5de5\u8d448000\u5143\u5230\u624b\u4ec55000\u5143\"","date":"2016-3-16"},{"title":"\u4e24\u4f1a\u95ed\u5e55\u8fbd\u5b81\"\u8001\u864e\"\u843d\u9a6c\u66fe3\u5e743\u8fde\u8df3\u5347\u526f\u90e8\u7ea7","date":"2016-3-16"},{"title":"\u5b81\u6ce2\u5e02\u957f\u5362\u5b50\u8dc3\u4e25\u91cd\u8fdd\u7eaa\u88ab\u67e5\u88ab\u6307\u884c\u8d3f\u65af\u946b\u826f","date":"2016-3-16"},{"title":"\u7f8e\u5973\u7ffb\u8bd1\u516d\u4e0a\u603b\u7406\u8bb0\u8005\u4f1a\u5916\u53f7\u6a31\u6843\u5c0f\u4e38\u5b50","date":"2016-3-16"},{"title":"\u5916\u5a92:\u5370\u5c3c\u8b66\u65b9\u51fb\u6bd9\u4e24\u540d\u4e2d\u56fd\u7c4d\u6781\u7aef\u5206\u5b50","date":"2016-3-16"},{"title":"\u590d\u65e6\u5c06\u6297\u80bf\u7624\u836f\u7269\u4e13\u52296500\u4e07\u7f8e\u5143\u552e\u7f8e\u56fd\u516c\u53f8","date":"2016-3-16"}]
하나의 배열 을 되 돌려 줍 니 다.배열 요 소 는 7 개의 JSON 대상 이 고 대상 마다 두 개의 속성 이 있 습 니 다:title 과 date전단 에서 해 야 할 일 은 이 데 이 터 를 얻 고 DOM 작업 을 통 해 웹 페이지 의 해당 위치 에 두 는 것 이다.
Ajax:특정한 인터페이스(파일)를 통 해 서버 에 데 이 터 를 가 져 오고 가 져 온 데 이 터 를 데이터 특성 에 따라 클 라 이언 트 홈 페이지 에 올 려 처리 합 니 다.
<body>
<input id="btn" type="button" value=" "/>
<ul id="ul1"> </ul>
<script src="JSON.js"></script>
<script src="ajax.js"></script>
</body>
xhr.open("get","getNews.php",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data=JSON.parse(xhr.responseText);
varoUl=document.getElementById("ul1");
var html=''; //DOM , 。
for(var i=0; i<data.length;i++) {
html+='<li> <a herf="">'+ data[i].title + '</a> [<span>' + data[i].date + '</span>]</li>';
}
oUl.innerHTML=html;
}else{
alert(" ,Err: " + xhr.status);
}
}
}
데 이 터 를 되 찾 는 페이지:③ ajax 함수 단순 패키지
functionajax(method,url,data,fn){
try{
xhr=new XMLHttpRequest();
}catch(e){
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
if(method == "get" &&data){
url+='?'+data;
}
xhr.open(method,url,true);
if(method=="get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded") xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
fn(xhr.responseText);
}else{
alert(" ,Err: " + xhr.status);
}
}
}
}
④ ajax 폴 링 방식 으로 서버 자원 가 져 오기
setInterval(function(){
ajax('get','getNews.php','',function(data){
var data=JSON.parse(data);//
var oUl=document.getElementById("ul1");
var html='';
for (var i=0; i<data.length;i++){
html+='<li> <aherf="">' + data[i].title + '</a> [<span>' +data[i].date + '</span>] </li>';
}
oUl.innerHTML=html;
});
},1000);//ajax ,1 。
//ajax 1s , 。
더 많은 PHP 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.본 논문 에서 말 한 것 이 여러분 의 PHP 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
laravel에 yo에서 angularJs&coffeescript를 사용할 수 있도록 한다.먼저 yo 명령을 사용할 수 있어야하므로 아래에서 설치 global에 설치한 곳에서 laravel의 프로젝트 루트로 이동. 클라이언트 코드를 관리하는 디렉토리를 만들고 이동합니다. 클라이언트 환경 만들기 이것으로 히...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.