現在、HTML + JavaScript + PHP で検索画面を作成しています。 目的は、JavaScriptからPHPを経由してAPIを呼び出し、検索結果を画面に表示することです。 やりたいこと: 1. HTMLで検索フォームを作成 2. JavaScriptでフォームの値を取得 3. PHPにPOSTしてSpiral APIを呼び出す 4. PHPの返却結果をJSONで受け取り、画面に描画
$.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
$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"] ?? ""
];
}
}
?>コメント
ナレッジ
向上チーム
ご質問いただきましてありがとうございます。 検索画面を作成されているとのことですが、 標準機能である「検索フォームブロック/レコードリストブロック」を使用されていない理由はございますでしょうか。 「検索をしたときにのみ、検索結果を表示したい」場合であれば、ナレッジサイトに記事がございますので、ご参考にしていただけますと幸いです。 ▼検索後にレコードリストブロックを表示させる方法 https://knowledge.spirers.jp/article/development/detail/11351 > JavaScriptからPHP経由でAPIのデータを取得 検索フォームブロックを使用されない場合で、プログラムのどの部分でうまくいかない等、解決したい部分がございましたら、ご共有をお願いいたします。 例:非同期処理のレスポンスの取得ができていないなど また、非同期処理の実装につきましては、ajaxではございませんがクエスチョンボードにサンプルコードがございますので、ご参考にいただけますと幸いです。 ▼非同期通信について https://knowledge.spirers.jp/question/board/detail?topicid=183 ご確認の程、よろしくお願いいたします。
-
いいね
2025年10月22日(水)