はい、可能です。クエリをシームレスに (つまり、送信ボタンを押してページを更新せずに) 実行したい場合は、Ajax を使用して要求を非同期的に PHP スクリプトに送信する必要があります。
編集: 最も簡単な方法は、イベントで jQuery の$.get()
機能を使用することです。onchange
そうすれば、誰かがオプションを選択するたびに、jQuery はそのオプションの値とともにリクエストを PHP スクリプトに送信します。PHP スクリプトが実行され、新しいデータが jQuery に返されます。jQuery は、その DOM 機能を使用してそのデータをページに挿入します。
ボタンでも同じことができます。select要素のイベントではなく$.get()
、ボタンのイベントに固執してください。onclick
onchange
jQuery サイトのドキュメントには、関連するコード例が記載されています。
EDIT 2: さて、これは非常に缶詰の例です。
まず、バックエンドで実行したい実際のプロセスについて考えてみましょう。簡単に言えば、ユーザー入力から ID を取得し、それを使用してクエリを実行します。非常に簡単です(データベース作業にPDOを使用):
// in a real app, you'd need to sanitize and validate the incoming id
$id = $_GET['id'];
$stmt = $dbh->prepare("SELECT * FROM table_name WHERE id = :id");
$stmt->bindParam(":id", $id);
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($row); // makes it jQuery friendly
さて、バックエンドはかなりシンプルです。さて、魔法が起こるフォントの終わりについて。select
要素と a の両方を使用しbutton
て ID を PHP スクリプトに戻し、結果を処理する方法は次のとおりです。
<!-- Your HTML up to where the select and button are on your page -->
<select id="id" name="id">
<option value="1">Something</option>
<option value="2">Something Else</option>
<option value="3">Yet Another Thing</option>
</select>
<button id="btn" />
<!-- In your jQuery -->
$("#btn").click(function() {
$.get("path/to/your/back/end/script.php", { "id" : $("#id").value }, function(data) {
/* the data will be the json_encode($row) that was echoed from the PHP script.
* so, you'll need to drill into it, take the data you want, and use
* jQuery's/JavaScript's DOM manipulation tools to insert the data on your
* page
*/
}) // close $.get()
}); // close .click()
これはどれもテストされておらず、確かに不完全ですが、始めるには十分すぎるはずです。本当に、理解する必要があるのは、返されたデータを掘り下げる方法だけです (これは JSON オブジェクトなので、それほど悪くはないはずです... データが実際にどのように形成されるかを確認するには、ブラウザの Web 開発ツールを使用してください)。そして好きなところに差し込んでください。それと、上記で私が犯した可能性のあるばかげたエラー。
お役に立てれば!