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中防止SQL注入实现代码
Feb 19 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
Jun 19 PHP
PHP调用.NET的WebService 简单实例
Mar 27 PHP
php简单实现快速排序的方法
Apr 04 PHP
php两种无限分类方法实例
Apr 21 PHP
Linux系统中为php添加pcntl扩展
Aug 28 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
May 02 PHP
kindeditor 加入七牛云上传的实例讲解
Nov 12 PHP
PHP简单实现正则匹配省市区的方法
Apr 13 PHP
thinkphp3.2框架中where条件查询用法总结
Aug 13 PHP
thinkphp框架使用JWTtoken的方法详解
Oct 10 PHP
php7 list()、session及其他模块的修改实例分析
May 25 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
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python OpenCV实现视频分帧
2019/06/01 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
汉语言文学专业求职信
2014/06/19 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers