PHP+ajax實現(xiàn)獲取新聞數(shù)據(jù)簡單示例
本文實例講述了PHP+ajax實現(xiàn)獲取新聞數(shù)據(jù)的方法。分享給大家供大家參考,具體如下:
Get方式獲取到的信息是字符串(responseText)
① 可以借助JSON對象的方法:stringify()
和parse()
方法,進行字符串和對象之間的轉(zhuǎn)換
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));//---輸出數(shù)組[1,2,3] //alert(JSON.parse(s2));//---出錯。因為JSON對象格式嚴格,必須是:'{"left":100}'的格式 alert(JSON.parse(s3).left);//---輸出Object Object
②ajax獲取服務(wù)器內(nèi)容的實例:
getNews.php代碼:
<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $news=array( array("title"=>'XXXXXXXXXXXXXXXXX',"date"=>"2016-3-16"), array("title"=>'XXXXXXXXXXXXXXXXX"',"date"=>"2016-3-16"), array("title"=>'XXXXXXXXXXXXXXXXX',"date"=>"2016-3-16"), array("title"=>'XXXXXXXXXXXXXXXXX',"date"=>"2016-3-16"), array("title"=>'XXXXXXXXXXXXXXXXX',"date"=>"2016-3-16"), array("title"=>'XXXXXXXXXXXXXXXXX',"date"=>"2016-3-16"), array("title"=>'XXXXXXXXXXXXXXXXX',"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"},<span style="font-family: Arial, Helvetica, sans-serif;">{"title":"\u674e\u514b\u5f3a\u7b54\u5982\u4f55\u89e3\u51b3\"\u5de5\u8d448000\u5143\u5230\u624b\u4ec55000\u5143\"","date":"2016-3-16"},</span><span style="font-family: Arial, Helvetica, sans-serif;">{"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"}]
返回一個數(shù)組,數(shù)組元素為7個JSON對象,每個對象有兩個屬性:title和date
前端需要做的是,得到這些數(shù)據(jù),并把它們通過DOM操作放在網(wǎng)頁的相應(yīng)位置上。
Ajax:通過某個接口(文件)去服務(wù)器取數(shù)據(jù),把取回來的數(shù)據(jù),根據(jù)數(shù)據(jù)特性,放在客戶端網(wǎng)頁上處理。
<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操作,把服務(wù)器取回的內(nèi)容顯示在網(wǎng)頁上。 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); } } }
取回數(shù)據(jù)的頁面:
③ajax函數(shù)簡單封裝
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輪詢方式獲取服務(wù)器資源
setInterval(function(){ ajax('get','getNews.php','',function(data){ var data=JSON.parse(data);//參數(shù)回調(diào) 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鐘一次那么快,這樣太耗資源。
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設(shè)計有所幫助。
- php 三級聯(lián)動菜單
- php+mysql實現(xiàn)的二級聯(lián)動菜單效果詳解
- PHP+JS三級菜單聯(lián)動菜單實現(xiàn)方法
- thinkPHP實現(xiàn)的聯(lián)動菜單功能詳解
- thinkPHP基于ajax實現(xiàn)的菜單與分頁示例
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現(xiàn)2級聯(lián)動下拉菜單
- 落伍首發(fā) php+mysql 采用ajax技術(shù)的 省 市 地 3級聯(lián)動無刷新菜單 源碼
- PHP+Ajax實現(xiàn)的博客文章添加類別功能示例
- php+ajax實現(xiàn)無刷新文件上傳功能(ajaxuploadfile)
- Ajax中的JSON格式與php傳輸過程全面解析
- PHP+ajax實現(xiàn)二級聯(lián)動菜單功能示例
相關(guān)文章
php實現(xiàn)執(zhí)行某一操作時彈出確認、取消對話框
當執(zhí)行某一操作比如確認或者取消時如何彈出對話框,針對這個需求,下面使用php來實現(xiàn)下,感興趣的朋友不要錯過2013-12-12php站內(nèi)搜索并高亮顯示關(guān)鍵字的實現(xiàn)代碼
將sql語句中包含的%$info%交給DBMS執(zhí)行的時候,他會查找字段中含有變量$info的值的信息2011-12-12php+mysqli實現(xiàn)批量執(zhí)行插入、更新及刪除數(shù)據(jù)的方法
這篇文章主要介紹了php+mysqli實現(xiàn)批量執(zhí)行插入、更新及刪除數(shù)據(jù)的方法,主要涉及multi_query()函數(shù)的用法,需要的朋友可以參考下2015-01-01php中轉(zhuǎn)義mysql語句的實現(xiàn)代碼
如果你需要向數(shù)據(jù)庫,插入形如’你好’,這樣包含有單引號或者雙引號的字符串怎么辦,當然可以使用反斜杠進行轉(zhuǎn)義,但是如果內(nèi)容太多呢?2011-06-06解決php的“It is not safe to rely on the system’s timezone setti
這篇文章主要介紹了解決php的“It is not safe to rely on the system’s timezone settings”問題的方法,需要的朋友可以參考下2015-10-10PHP中把對象轉(zhuǎn)換為關(guān)聯(lián)數(shù)組代碼分享
這篇文章主要介紹了PHP中把對象轉(zhuǎn)換為關(guān)聯(lián)數(shù)組代碼分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-04-04