Anda dapat menggunakan kombinasi jQuery dan AJAX untuk melakukan ini. Jauh lebih sederhana daripada kedengarannya. Untuk melihat bahwa ini adalah jawaban yang tepat untuk Anda, lihat saja contoh ini .
Pada contoh di bawah ini, ada dua file .PHP:test86a.php dan test86b.php.
File pertama, 86A, memiliki kotak pilihan (dropdown) sederhana dan beberapa kode jQuery yang mengawasi kotak pilihan itu berubah. Untuk memicu kode jQuery, Anda bisa menggunakan jQuery .blur() berfungsi untuk melihat pengguna meninggalkan bidang tanggal, atau Anda dapat menggunakan API jQueryUI:
$('#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");
}
});
Bagaimanapun, ketika jQuery dipicu, permintaan AJAX dikirim ke file kedua, 86B. File ini secara otomatis mencari sesuatu dari database, mendapatkan jawaban, membuat beberapa konten HTML berformat, dan echo itu kembali ke file pertama. Ini semua terjadi melalui Javascript, dimulai pada browser - seperti yang Anda inginkan.
Kedua file ini adalah contoh independen yang berfungsi penuh. Cukup ganti login dan konten MYSQL dengan nama bidang Anda sendiri, dll dan saksikan keajaiban terjadi.
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;
Ini contoh AJAX yang lebih sederhana namun contoh lain untuk Anda periksa.
Dalam semua contoh, perhatikan bagaimana pengguna memasok konten HTML (apakah dengan mengetik sesuatu atau memilih nilai tanggal baru atau memilih pilihan dropdown). Data yang disediakan pengguna adalah:
1) DIAMBIL melalui jQuery:var sel_stud = $('#stSelect').val();
2) kemudian DIKIRIM melalui AJAX ke skrip kedua. ($.ajax({}) barang)
Skrip kedua menggunakan nilai yang diterimanya untuk mencari jawabannya, kemudian ECHOES yang menjawab kembali ke skrip pertama:echo $r;
Skrip pertama MENERIMA jawaban dalam fungsi sukses AJAX, dan kemudian (masih di dalam fungsi sukses) MENYUNTIKKAN jawaban ke halaman:$('#LaDIV').html(whatigot);
Silakan bereksperimen dengan contoh-contoh sederhana ini -- contoh tertaut pertama (lebih sederhana) tidak memerlukan pencarian basis data, sehingga harus dijalankan tanpa perubahan.
