YahooショッピングAPIをjQueryの$.ajaxとPHPを使用して結果を表示するコードサンプル

Yahoo!デベロッパーネットワークのショッピングWeb APIにある商品検索APIを使用して、キーワード検索した結果を表示する簡単なプログラムを作成してみました。

以前に書いた記事（$.ajaxでYahooショッピング商品検索APIを利用したプログラムを作成）では、JavaScript（jQuery）だけで作成したのですが、ここではPHPとjQueryを使用して商品検索結果を表示しています。

Yahoo!ショッピングWeb APIのコード例

Webサービス：Yahooショッピング商品検索API
データ形式：XML、JSONP等
使用時の注記：クレジット表示必要
利用時の登録：必要

下のコードでは、PHPを使用して商品検索APIにリクエストして結果を取得するしています。

<?php
$request_yahoo = 'http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch';
$appid_yahoo = 'アプリケーションID';
$query_yahoo = $_POST['query'];
$base_url = "$request_yahoo?appid=$appid_yahoo&query=$query_yahoo";

$json = file_get_contents($base_url);
$json = mb_convert_encoding($json, 'UTF-8');
header('Content-type: application/json; charset=UTF-8');
print($json);

下のコードでは、jQuery（JavaScript）を使い、$.ajaxの非同期通信の設定にして上のPHPとキーワードと検索結果のデータのやり取りをしています。

var goods = {};
$(function() {
  $('#button').on('click', function(e) {
    e.preventDefault();
    $.ajax({
      url:'appid.php',
      type: 'post',
      dataType: 'json',
      async: 'true',
      data: {
        query: $('#word').val(),
      }
    })
    .done(function(data) {
      goods = data.ResultSet[0];
      $('#content').empty();
			
      for(var i = 0; i < 5; i++) {
        var img_goods = $('<img>').attr('src', goods.Result[i].Image.Small);
        $('#content').append('<p>' + goods.Result[i].Name +'（'+ goods.Result[i].Category.Current.Name +'）').append(img_goods)
      }
    })
    .fail(function(data) {
      alert(data);
    });
  });
});

下のHTMLでは、キーワードとなる単語の入力と検索結果を表示します。

<input type="text" id="word" value="" />
<input type="button" id="button" value="送信" />
<div id="content"></div>