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 身份证号验证函数
May 07 PHP
探讨:parse url解析URL,返回其组成部分
Jun 14 PHP
php常用文件操作函数汇总
Nov 22 PHP
discuz目录文件资料汇总
Dec 30 PHP
PHP中文乱码解决方案
Mar 05 PHP
php字符串按照单词进行反转的方法
Mar 14 PHP
使用PHP如何实现高效安全的ftp服务器(一)
Dec 20 PHP
PHP获取数组中单列值的方法
Jun 10 PHP
PHP基于自定义类随机生成姓名的方法示例
Aug 05 PHP
使用PHPExcel导出Excel表
Sep 08 PHP
php写入mysql中文乱码的实例解决方法
Sep 17 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
Nov 13 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js闭包的用途详解
2014/11/09 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python操作mongodb的9个步骤
2018/06/04 Python
numpy.where() 用法详解
2019/05/27 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python猜数字算法题详解
2020/03/01 Python
Python ini文件常用操作方法解析
2020/04/26 Python
100%羊绒:NakedCashmere
2020/08/26 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
文秘求职信范文
2014/04/10 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
单位工作证明书格式
2014/10/04 职场文书
交通安全月活动总结
2015/05/08 职场文书
尼克胡哲观后感
2015/06/08 职场文书
交通安全教育主题班会
2015/08/12 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
JavaScript实现优先级队列
2021/12/06 Javascript