機能概要

WebAPI①では、JSONからの返し値は、通常の配列でしたが、今回は、多次元配列で値を返します。
これにより、データベースからの複数レコードを取得することが可能になります。

プログラミングコード

「webapi-news_v2.html」フロントエンド：API読み出しページ

  • ６行目：「外部jqueryファイル」を読み込み、jQueryが使用できるようにします。（今回の仕組みは、jQueryライブラリを活用しています）
  • ８～２２行目：「javascript」の関数「mj_api()」を作成します。
  • ９行目：phpのAPIのリンクを変数「url」に登録します。
  • １１行目：JSONファイルから値を受け取ります。
  • １２行目：「disp_text」の中を初期化します。
  • １４～２０行目：配列「data」の数だけループさせます。また、「divタグ」の「disp_text」にinnerHTMLを利用して画面上に出力します。
  • ２５行目：イベント「onload」は、画面をロードした時を意味します。今回は、ロード時に「mj_api()」を実行します。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    function mj_api(){
        url = "webapi-news_v2.php";

        $.getJSON(url, (data) => {
            disp_text.innerHTML = "";

            for (let i=0; i<data.length; i++){
                disp_text.innerHTML += "status：" + data[i]["status"] + "<br>";
                disp_text.innerHTML += "new_no：" + data[i]["new_no"] + "<br>";
                disp_text.innerHTML += "title_kj：" + data[i]["title_kj"] + "<br>";
                disp_text.innerHTML += "article_kj：" + data[i]["article_kj"] + "<br>";
                disp_text.innerHTML += "<hr>";
            }
        });
    }
</script>
</head>
<body onload="mj_api()">
    <div>ニュース情報を取得<br></div>
    <div id="disp_text"></div>
</body>
</html>

「webapi-news_v2.php」バックエンド：APIファイル

  • ２行目：配列「$arr_data」を配列として宣言します。
  • ３～１６行目：配列「$arr_data」に値を入力します。
  • １７行目：「header」関数を使用して、jsonファイルということが分かるようにヘッダーを登録します。
  • １８行目：「json_encode()」を用いて、配列をJSONファイルに変換します。
<?php
$arr_data = array();
$arr_data = [
    [
    "status" => "OK"
    ,"new_no" => "1"
    ,"title_kj" => "1：ここにタイトルが入ります。"
    ,"article_kj" => "1：ここに本文が入ります。"
    ],
    [
    "status" => "OK"
    ,"new_no" => "2"
    ,"title_kj" => "2：ここにタイトルが入ります。"
    ,"article_kj" => "2：ここに本文が入ります。"
    ]
];
header('content-type: application/json; charset=utf-8');
echo json_encode($arr_data);
?>

演習問題

  1. 上記のコードを使用して、ファイル作成し、動作するようにしてみよう。
  2. 上記のプログラムにデータベース接続し、ニュース一覧などを取得できるようにしてみよう。
次のページへ