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下载远程文件类(支持断点续传)
Nov 14 PHP
php中利用post传递字符串重定向的实现代码
Apr 21 PHP
php中json_encode中文编码问题分析
Sep 13 PHP
PHP 之 写时复制介绍(Copy On Write)
May 13 PHP
phpcms中的评论样式修改方法
Oct 21 PHP
thinkphp关于简单的权限判定方法
Apr 03 PHP
Windows平台实现PHP连接SQL Server2008的方法
Jul 26 PHP
PHP实现求解最长公共子串问题的方法
Nov 17 PHP
php学习笔记之mb_strstr的基本使用
Feb 03 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
May 29 PHP
YII框架页面缓存操作示例
Apr 29 PHP
用php实现分页效果的示例代码
Dec 10 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
桌面中心(三)修改数据库
2006/10/09 PHP
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
详解Vue中watch的高级用法
2018/05/02 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python实现查询IP地址所在地
2015/03/29 Python
基于python 字符编码的理解
2017/09/02 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python switch 实现多分支选择功能
2020/12/21 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
劳资专员岗位职责
2013/12/27 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
开学寄语大全
2014/04/08 职场文书
公司担保书格式范文
2014/05/12 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
工作作风建设心得体会
2014/10/22 职场文书
捐助感谢信
2015/01/22 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
导游词之张家界
2019/10/31 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL