これを行うには、jQueryとAJAXを組み合わせて使用できます。思ったよりずっと簡単です。これがあなたにとって正しい答えであることを確認するには、この例を見るだけ 。
以下の例では、test86a.phpとtest86b.phpの2つの.PHPファイルがあります。
最初のファイル86Aには、単純な選択（ドロップダウン）ボックスと、その選択ボックスの変更を監視するjQueryコードが含まれています。 jQueryコードをトリガーするには、jQuery .blur()を使用できます。 ユーザーが日付フィールドを離れるのを監視する関数、またはjQueryUI APIを使用できます：
$('#date_start').datepicker({
onSelect: function(dateText, instance) {
// Split date_finish into 3 input fields
var arrSplit = dateText.split("-");
$('#date_start-y').val(arrSplit[0]);
$('#date_start-m').val(arrSplit[1]);
$('#date_start-d').val(arrSplit[2]);
// Populate date_start field (adds 14 days and plunks result in date_finish field)
var nextDayDate = $('#date_start').datepicker('getDate', '+14d');
nextDayDate.setDate(nextDayDate.getDate() + 14);
$('#date_finish').datepicker('setDate', nextDayDate);
splitDateStart($("#date_finish").val());
},
onClose: function() {
//$("#date_finish").datepicker("show");
}
});
いずれにせよ、jQueryがトリガーされると、AJAXリクエストが2番目のファイル86Bに送信されます。このファイルは、データベースから自動的に検索し、回答を取得し、フォーマットされたHTMLコンテンツを作成し、echo 最初のファイルに戻ります。これはすべて、ブラウザで開始されたJavascriptを介して行われます-あなたが望むように。
これらの2つのファイルは、独立した、完全に機能する例です。 MYSQLのログインとコンテンツを独自のフィールド名などに置き換えて、魔法が起こるのを見てください。
TEST86A.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('Document is ready');
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "test86b.php", // "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready
</script>
</head>
<body>
<select name="students" id="stSelect">
<option value="">Please Select</option>
<option value="John">John Doe</option>
<option value="Mike">Mike Williams</option>
<option value="Chris">Chris Edwards</option>
</select>
<div id="LaDIV"></div>
</body>
</html>
TEST86B.PHP
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'abcd1234';
$pword = 'verySecret';
$dbname = 'abcd1234_mydb';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);
//Run DB query
$query = "SELECT `user_id`, `first_name`, `last_name` FROM `users` WHERE `first_name` = '$selStudent' AND `user_type` = 'staff'";
$result = mysql_query($query) or die('Fn test86.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
$r = '
<h1>Found in Database:</h1>
<ul style="list-style-type:disc;">
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<li> ' . $row['first_name'] . ' ' . $row['last_name'] . ' -- UserID [' .$row['user_id']. ']</li>';
}
} else {
$r = '<p>No student by that name on staff</p>';
}
//Add this extra button for fun
$r = $r . '</ul><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the
echo $r;
これが
すべての例で、ユーザーがHTMLコンテンツを提供する方法に注意してください（何かを入力するか、新しい日付値を選択するか、ドロップダウン選択を選択するかどうか）。ユーザー提供のデータは次のとおりです。
1）jQueryを介して取得：var sel_stud = $('#stSelect').val();
2）次に、AJAXを介して2番目のスクリプトに送信します。 （$.ajax({}) もの）
2番目のスクリプトは、受け取った値を使用して回答を検索し、その回答を最初のスクリプトにエコーバックします：echo $r;
最初のスクリプトはAJAX成功関数で回答を受け取り、次に（まだ成功関数内で）ページに回答を挿入します：$('#LaDIV').html(whatigot);
これらの単純な例を試してみてください。最初の（より単純な）リンクされた例はデータベースルックアップを必要としないため、変更なしで実行する必要があります。