質問

投稿者:M
登録日:2025年10月21日(火)

JavaScriptからPHP経由でAPIのデータを取得

現在、HTML + JavaScript + PHP で検索画面を作成しています。 目的は、JavaScriptからPHPを経由してAPIを呼び出し、検索結果を画面に表示することです。 やりたいこと: 1. HTMLで検索フォームを作成 2. JavaScriptでフォームの値を取得 3. PHPにPOSTしてSpiral APIを呼び出す 4. PHPの返却結果をJSONで受け取り、画面に描画

javascript
    $.ajax({
      url: "https://seri-member-site-test.spiral-site.com/CustomerMemberSiteMenu/StoreInfoMaintenance/StoreList.php",
      type: "POST",
      data: { store_cd, store_name },
      dataType: "json",
      success: function (data) {
        let html = "";

        if (!data || data.length === 0) {
          html = `<div class="alert alert-warning">該当する店舗がありません。</div>`;
        } else {
          html += `<div class="table-wrap"><table class="table table-bordered table-striped">`;
          html += `<thead><tr><th>店舗CD</th><th>店舗名</th></tr></thead><tbody>`;
          data.forEach(item => {
            html += `<tr><td>${item.StoreCD}</td><td>${item.StoreName}</td></tr>`;
          });
          html += `</tbody></table></div>`;
        }

        $("#resultArea").html(html);
      },
      error: function (xhr) {
        $("#resultArea").html(`<div class="alert alert-danger">検索中にエラーが発生しました。</div>`);
        console.error(xhr.responseText);
      }
    });
php
<?php

$base_url = "https://api.spiral-platform.com/v1/";
$app_id   = " アプリID";   // アプリID
$db_id    = "店舗DB";  // 店舗DB
$apikey   = "APIkey";

$store_cd   = trim($_POST['store_cd'] ?? "");
$store_name = trim($_POST['store_name'] ?? "");

$where = [];
if ($store_cd !== "")   $where[] = "@StoreCD ILIKE \"%$store_cd%\"";
if ($store_name !== "") $where[] = "@StoreName ILIKE \"%$store_name%\"";

$query = "";
if (count($where) > 0) {
    $query = "&where=" . urlencode(implode("+AND+", $where));
}

$url = "{$base_url}apps/{$app_id}/dbs/{$db_id}/records?limit=200&sort=StoreCD:asc{$query}";

// cURL で API 呼び出し
$curl = curl_init($url);
curl_setopt_array($curl, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => [
        "X-Spiral-API-Key: {$apikey}",
        "Content-Type: application/json"
    ]
]);

$response = curl_exec($curl);
if (curl_errno($curl)) {
    echo "<p>cURL エラー: " . curl_error($curl) . "</p>";
    exit;
}
curl_close($curl);

$data = json_decode($response, true);

// 結果整形
$results = [];
if (isset($data["items"])) {
    foreach ($data["items"] as $item) {
        $results[] = [
            "StoreCD"   => $item["StoreCD"] ?? "",
            "StoreName" => $item["StoreName"] ?? ""
        ];
    }
}
?>
更新日:2025年10月22日(水)
いいね

コメント

  • ご質問いただきましてありがとうございます。 検索画面を作成されているとのことですが、 標準機能である「検索フォームブロック/レコードリストブロック」を使用されていない理由はございますでしょうか。 「検索をしたときにのみ、検索結果を表示したい」場合であれば、ナレッジサイトに記事がございますので、ご参考にしていただけますと幸いです。 ▼検索後にレコードリストブロックを表示させる方法 https://knowledge.spirers.jp/article/development/detail/11351 > JavaScriptからPHP経由でAPIのデータを取得 検索フォームブロックを使用されない場合で、プログラムのどの部分でうまくいかない等、解決したい部分がございましたら、ご共有をお願いいたします。 例:非同期処理のレスポンスの取得ができていないなど また、非同期処理の実装につきましては、ajaxではございませんがクエスチョンボードにサンプルコードがございますので、ご参考にいただけますと幸いです。 ▼非同期通信について https://knowledge.spirers.jp/question/board/detail?topicid=183 ご確認の程、よろしくお願いいたします。

    • いいね
    2025年10月22日(水)
あなたもログインして、
回答してみませんか?