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 相关文章推荐
PHPShop存在多个安全漏洞
Oct 09 PHP
在windows iis5下安装php4.0+mysql之我见
Oct 09 PHP
使用PHP实现二分查找算法代码分享
Jun 24 PHP
php preg_replace替换实例讲解
Nov 04 PHP
PHP eval函数使用介绍
Dec 08 PHP
php中http与https跨域共享session的解决方法
Dec 20 PHP
php检查是否是ajax请求的方法
Apr 16 PHP
PHP正则表达式过滤html标签属性(DEMO)
May 04 PHP
php获取数据库中数据的实现方法
Jun 01 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
Sep 21 PHP
详解PHP神奇又有用的Trait
Mar 25 PHP
Laravel登录失败次数限制的实现方法
Aug 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
Javascript的闭包
2009/12/31 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
python生成器generator用法实例分析
2015/06/04 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
大学生创业项目方案
2014/03/08 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
拙作再改《我的收音机情缘》
2022/04/05 无线电