PHP+ajax实现获取新闻数据简单示例

本文实例讲述了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);
    }
  }
}

取回数据的页面:

③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+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:

  • PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
  • AJAX 动态获取当前时间(php)
  • ajax获取php页面的返回参数,控件赋值的方法
  • 用PHP获取Google AJAX Search API 数据的代码
  • PHP Ajax JavaScript Json获取天气信息实现代码
  • php获取ajax的headers方法与内容实例
  • php+ajax实现无刷新动态加载数据技术
  • php基于jquery的ajax技术传递json数据简单实例
  • ajax处理php返回json数据的实例代码
  • Ajax+php数据交互并且局部刷新页面的实现详解
(0)

相关推荐

  • php基于jquery的ajax技术传递json数据简单实例

    本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

  • 用PHP获取Google AJAX Search API 数据的代码

    http://code.google.com/apis/ajaxsearch/documentation/#fonje 复制代码 代码如下: // This example request includes an optional API key which you will need to // remove or replace with your own key. // Read more about why it's useful to have an API key. // The r

  • AJAX 动态获取当前时间(php)

    客户端代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • php获取ajax的headers方法与内容实例

    1.前端页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"&

  • PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)

    看点: 1.file_get_contents超时控制. 2.页面编码判断. 3.键盘Enter键捕捉响应. 4.键盘event兼容处理.//event = event || window.event; 5.XMLHttpRequest 和 jQuery 两种实现方案. 6.页面及源码同时展示. XMLHttpRequest版本 get_web.php 复制代码 代码如下: <?php header("Content-type: text/html; charset=utf-8"

  • PHP Ajax JavaScript Json获取天气信息实现代码

    要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有这样的一种简单的方式,借助http://www.tianqi.com/plugin/网上的天气服务,可以定制我们的显示形状,实现添加天气预报的功能. 下面给出一个简单的小例子: 复制代码 代码如下: <iframe width="420" scrolling="no" height="60" frameborder=&

  • ajax处理php返回json数据的实例代码

    test.html 复制代码 代码如下: <label onclick="javascript:post_data();">click </label> function ajax_init() { var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Micros

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • Ajax+php数据交互并且局部刷新页面的实现详解

    什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

  • ajax获取php页面的返回参数,控件赋值的方法

    js页面 $.ajax({ type : "get", url : "", //跳转页面 data :"m=content&c=favorite&a=del_favorite&shoucangId="+_id,//传递的参数 datatype : "html", async:'false', success : function(data) //返回值 { if(data !=null) { var s

随机推荐