PHP+ajax实现获取新闻数据简单示例


Posted in PHP onMay 08, 2018

本文实例讲述了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"},<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:通过某个接口(文件)去服务器取数据,把取回来的数据,根据数据特性,放在客户端网页上处理。

<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);
    }
  }
}

取回数据的页面:

PHP+ajax实现获取新闻数据简单示例

③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 相关文章推荐
PHP stristr() 函数(不区分大小写的字符串查找)
Jun 03 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
Oct 31 PHP
php输出xml格式字符串(用的这个)
Jul 12 PHP
php防注入,表单提交值转义的实现详解
Jun 10 PHP
php中如何防止表单的重复提交
Aug 02 PHP
php5.3 goto函数介绍和示例
Mar 21 PHP
php动态变量定义及使用
Jun 10 PHP
Netbeans 8.2将支持PHP7 更精彩
Jun 13 PHP
Yii调试查看执行SQL语句的方法
Jul 15 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
Oct 17 PHP
PHP实现负载均衡session共享redis缓存操作示例
Aug 22 PHP
php实现通过stomp协议连接ActiveMQ操作示例
Feb 23 PHP
PHP 计算两个特别大的整数实例代码
May 07 #PHP
详解PHP发送邮件知识点
May 06 #PHP
PHP学习笔记之session
May 06 #PHP
PHP中cookie知识点学习
May 06 #PHP
分析php://output和php://stdout的区别
May 06 #PHP
PHP 布尔值的自增与自减的实现方法
May 03 #PHP
PHPExcel 修改已存在Excel的方法
May 03 #PHP
You might like
Terran热键控制
2020/03/14 星际争霸
谈谈PHP语法(3)
2006/10/09 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
js数据类型检测总结
2018/08/05 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
python从子线程中获得返回值的方法
2019/01/30 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python自动发微信监控报警
2019/09/06 Python
django框架cookie和session用法实例详解
2019/12/10 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
2014年纠风工作总结
2014/12/08 职场文书
无房证明样本
2015/06/17 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
python异步的ASGI与Fast Api实现
2021/07/16 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers
A22国内电台短波广播频率表
2022/05/10 无线电