は私が始めるだろうかです：データベースから引き出し、オプションで選択をセットアップページになります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Find Student ></button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<div id="studentdrop">
<?php
// $pdo = new PDO('mysql:host=localhost;dbname=thename', 'root', 'root');
// $result = $pdo->query('SELECT student_forename, student_surname FROM students');
$result = array(
array("student_id" => 1, "student_forename" => 'Joe', "student_surname" => 'Jones'),
array("student_id" => 2, "student_forename" => 'Mary', "student_surname" => 'Jones'),
array("student_id" => 3, "student_forename" => 'Perry', "student_surname" => 'Wallace')
);
echo "<select id='user_id'>";
foreach ($result as $row) {
echo '<option value="' . $row['student_id'] . '">' . $row['student_forename'] . " " . $row['student_surname'] . '</option>';
}
echo "</select>";
?>
</div>
</div>
</div>
<div class="data"></div>
<script type="text/javascript">
$(document).ready(function() {
$('.dropbtn').click(function() {
$.get("output.php", { id: $('#user_id option:selected').val() }, function(data) {
$('.data').text(data);
console.log(data);
});
});
});
</script>
</body>
</html>
。 dbをセットアップしてテストする時間がなかったので、修正する必要があります。しかし、結果はselectオプションで使用できる配列です。
JavaScriptを更新して、取得リクエストでユーザーデータを取得し、返されたデータを<div>タグに取り込みます。
<?php
$id = $_GET['id'];
switch($id) {
case 1:
echo "This is student Joe Jones";
break;
case 2:
echo "This is student Mary Jones";
break;
case 3:
echo "This is student Perry Wallace";
break;
}
これは単純なページですが、データベースを照会し、必要なすべてのデータを返すためにそれを変更することができます：ここで
はoutput.phpページです。これは、index.phpページからのajax getリクエストのidに渡されたものを使用しています。私は入力の検証とそれが浄化されたデータであることを確認するためのチェックを追加することをお勧めします。
ディレクトリを作成し、そこにこれらの2つのファイルを配置すると、PHPサーバーでビルドして実行できます。私がやりたいことは次のとおりです：php -S localhost:8080。
質問がある場合はお知らせください。
あなたは 'output.php'から'応答 'として何を得ているのか教えてください。 –
Imは何も起こっていないので、何も起こっていない瞬間に応答が得られません – Jub
'console.log（response）'を実行すると出力はどうなりますか？ - あなたのコンソールの 'undefined'または空白行 –