PHP+ajaxを利用してニュースデータを取得する場合の詳細説明-PHPチュートリアル-php.cn

PHP+ajaxを利用してニュースデータを取得する場合の詳細説明

php中世界最好的语言

リリース： 2023-03-25 20:58:02

オリジナル

2687 人が閲覧しました

今回はPHP+ajaxを利用してニュースデータを取得する場合について詳しく解説していきます。 PHP+ajaxを利用してニュースデータを取得する際の注意点は以下の通りです。場合は、一緒に見てみましょう。

Getメソッドで取得する情報は

String(responseText)

①JSONオブジェクトメソッド:メソッドを使って文字列とオブジェクト間の変換が可能stringify()和parse()

var arr=[1,2,3];
var a={left:100};
//alert(JSON.stringify(a));//typeof JSON.stringify(arr)是string
//JSON对象的输出有严格格式：&#39;{"left":100}&#39;,变量值要加双引号
var s1="[1,2,3]";
var s2="{left:100}";
var s3=&#39;{"left":100}&#39;;
//alert(JSON.parse(s1));//---输出数组[1,2,3]
//alert(JSON.parse(s2));//---出错。因为JSON对象格式严格，必须是:&#39;{"left":100}&#39;的格式
alert(JSON.parse(s3).left);//---输出Object Object

ログイン後にコピー

②ajaxでサーバーコンテンツのインスタンスを取得:

getNews.php コード:

<?php
header(&#39;content-type:text/html;charset="utf-8"&#39;);
error_reporting(0);
$news=array(
  array("title"=>&#39;习近平同代表委员共商国是两会细节 国平&#39;,"date"=>"2016-3-16"),
   array("title"=>&#39;李克强答如何解决"工资8000元到手仅5000元"&#39;,"date"=>"2016-3-16"),
   array("title"=>&#39;两会闭幕辽宁"老虎"落马曾3年3连跳升副部级&#39;,"date"=>"2016-3-16"),
   array("title"=>&#39;宁波市长卢子跃严重违纪被查 被指行贿斯鑫良&#39;,"date"=>"2016-3-16"),
   array("title"=>&#39;美女翻译六上总理记者会 外号樱桃小丸子&#39;,"date"=>"2016-3-16"),
   array("title"=>&#39;外媒:印尼警方击毙两名中国籍极端分子&#39;,"date"=>"2016-3-16"),
   array("title"=>&#39;复旦将抗肿瘤药物专利6500万美元售美国公司&#39;,"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 オブジェクトで、各オブジェクトにはタイトルと日付の 2 つの属性があります

フロントエンドが行う必要があるのは、これらのデータを取得し、DOM 操作を通じて Web ページの対応する位置に配置することです。

Ajax: サーバーにアクセスして、特定のインターフェイス (ファイル) を介してデータを取得し、取得したデータをクライアントの Web ページに配置して、データの特性に応じて処理します。

<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=&#39;&#39;; //DOM操作，把服务器取回的内容显示在网页上。
    for(var i=0; i<data.length;i++) {
     html+=&#39;<li> <a herf="">&#39;+ data[i].title + &#39;</a> [<span>&#39; + data[i].date + &#39;</span>]</li>&#39;;
   }
    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+=&#39;?&#39;+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(&#39;get&#39;,&#39;getNews.php&#39;,&#39;&#39;,function(data){
      var data=JSON.parse(data);//参数回调
      var oUl=document.getElementById("ul1");
      var html=&#39;&#39;;
      for (var i=0; i<data.length;i++){
        html+=&#39;<li> <aherf="">&#39; + data[i].title + &#39;</a> [<span>&#39; +data[i].date + &#39;</span>] </li>&#39;;
      }
      oUl.innerHTML=html;
    });
},1000);//ajax轮询方式，1秒钟自动更新一次页面。
    //ajax真正的轮询不会1s钟一次那么快，这样太耗资源。

ログイン後にコピー

この記事の事例を読んで、方法をマスターしたと思いますので、お願いします。よりエキサイティングな情報を求めてお越しください。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

phpの共有メモリの使用量と信号制御のユースケース分析

vuexの操作状態オブジェクトメソッドの詳細な説明

vueのcomponents_vue.jsの使用に関する詳細

以上がPHP+ajaxを利用してニュースデータを取得する場合の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。