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 相关文章推荐
计算2000年01月01日起到指定日的天数
Oct 09 PHP
ADODB类使用
Nov 25 PHP
php empty函数 使用说明
Aug 10 PHP
Ajax+PHP边学边练 之五 图片处理
Dec 03 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
Mar 02 PHP
给初学者的30条PHP最佳实践(荒野无灯)
Aug 02 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
Dec 24 PHP
PHP中实现crontab代码分享
Mar 26 PHP
PHP实现对数组分页处理实例详解
Feb 07 PHP
PHP中时间加减函数strtotime用法分析
Apr 26 PHP
php 可变函数使用小结
Jun 12 PHP
PHP时间类完整代码实例
Feb 26 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 form 表单传参明细研究
2009/07/17 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[02:27]刀塔重生降临
2015/10/14 DOTA
python读取word文档的方法
2015/05/09 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
车队司机个人自我鉴定
2014/04/17 职场文书
财务会计求职信范文
2015/03/20 职场文书
积极心理学课程心得体会
2016/01/22 职场文书