• 售前

  • 售后

热门帖子
入门百科

PHP+ajax实现获取消息数据简单示例

[复制链接]
驳论王洪qa 显示全部楼层 发表于 2021-10-25 20:39:14 |阅读模式 打印 上一主题 下一主题
本文实例讲述了PHP+ajax实现获取新闻数据的方法。分享给各人供各人参考,具体如下:
Get方式获取到的信息是字符串(responseText)
① 可以借助JSON对象的方法
  1. stringify()
复制代码
  1. parse()
复制代码
方法,举行字符串和对象之间的转换
  1. var arr=[1,2,3];
  2. var a={left:100};
  3. //alert(JSON.stringify(a));//typeof JSON.stringify(arr)是string
  4. //JSON对象的输出有严格格式:'{"left":100}',变量值要加双引号
  5. var s1="[1,2,3]";
  6. var s2="{left:100}";
  7. var s3='{"left":100}';
  8. //alert(JSON.parse(s1));//---输出数组[1,2,3]
  9. //alert(JSON.parse(s2));//---出错。因为JSON对象格式严格,必须是:'{"left":100}'的格式
  10. alert(JSON.parse(s3).left);//---输出Object Object
复制代码
②ajax获取服务器内容的实例:
getNews.php代码:
  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  4. $news=array(
  5.   array("title"=>'习近平同代表委员共商国是两会细节 国平',"date"=>"2016-3-16"),
  6.    array("title"=>'李克强答如何解决"工资8000元到手仅5000元"',"date"=>"2016-3-16"),
  7.    array("title"=>'两会闭幕辽宁"老虎"落马曾3年3连跳升副部级',"date"=>"2016-3-16"),
  8.    array("title"=>'宁波市长卢子跃严重违纪被查 被指行贿斯鑫良',"date"=>"2016-3-16"),
  9.    array("title"=>'美女翻译六上总理记者会 外号樱桃小丸子',"date"=>"2016-3-16"),
  10.    array("title"=>'外媒:印尼警方击毙两名中国籍极端分子',"date"=>"2016-3-16"),
  11.    array("title"=>'复旦将抗肿瘤药物专利6500万美元售美国公司',"date"=>"2016-3-16"),
  12. );
  13. 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"}]
返回一个数组,数组元素为7个JSON对象,每个对象有两个属性:title和date
前端需要做的是,得到这些数据,并把它们通过DOM利用放在网页的相应位置上。
Ajax:通过某个接口(文件)去服务器取数据,把取返来的数据,根据数据特性,放在客户端网页上处理。
  1. <body>
  2.     <input id="btn" type="button" value="按钮"/>
  3.     <ul id="ul1">获取新闻到该处</ul>
  4.     <script src="JSON.js"></script>
  5.     <script src="ajax.js"></script>
  6. </body>
复制代码
  1. xhr.open("get","getNews.php",true);
  2. xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
  3. xhr.send();
  4. xhr.onreadystatechange=function(){
  5. if(xhr.readyState==4){
  6.   if(xhr.status==200){
  7.     var data=JSON.parse(xhr.responseText);
  8.     varoUl=document.getElementById("ul1");
  9.     var html=''; //DOM操作,把服务器取回的内容显示在网页上。
  10.     for(var i=0; i<data.length;i++) {
  11.      html+='<li> <a herf="">'+ data[i].title + '</a> [<span>' + data[i].date + '</span>]</li>';
  12.    }
  13.     oUl.innerHTML=html;
  14.     }else{
  15.      alert("出错了,Err: " + xhr.status);
  16.     }
  17.   }
  18. }
复制代码
取回数据的页面:

③ajax函数简朴封装
  1. functionajax(method,url,data,fn){
  2.   try{
  3.     xhr=new XMLHttpRequest();
  4.   }catch(e){
  5.     xhr=newActiveXObject("Microsoft.XMLHTTP");
  6.   }
  7.   if(method == "get" &&data){
  8.     url+='?'+data;
  9.   }
  10.   xhr.open(method,url,true);
  11.   if(method=="get"){
  12.     xhr.send();
  13.   }else{
  14.     xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")        xhr.send(data);
  15. }
  16. xhr.onreadystatechange=function(){
  17.   if(xhr.readyState==4){
  18.       if(xhr.status==200){
  19.         fn(xhr.responseText);
  20.       }else{
  21.         alert("出错了,Err: " + xhr.status);
  22.       }
  23.     }
  24.   }
  25. }
复制代码
④ajax轮询方式获取服务器资源
  1. setInterval(function(){
  2.    ajax('get','getNews.php','',function(data){
  3.       var data=JSON.parse(data);//参数回调
  4.       var oUl=document.getElementById("ul1");
  5.       var html='';
  6.       for (var i=0; i<data.length;i++){
  7.         html+='<li> <aherf="">' + data[i].title + '</a> [<span>' +data[i].date + '</span>] </li>';
  8.       }
  9.       oUl.innerHTML=html;
  10.     });
  11. },1000);//ajax轮询方式,1秒钟自动更新一次页面。
  12.     //ajax真正的轮询不会1s钟一次那么快,这样太耗资源。
复制代码
更多关于PHP相干内容感兴趣的读者可查察本站专题:《PHP+ajax本领与应用小结》、《PHP网络编程本领总结》、《PHP基本语法入门教程》、《php面向对象步伐设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库利用入门教程》及《php常见数据库利用本领汇总》
希望本文所述对各人PHP步伐设计有所帮助。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作