Bạn có thể sử dụng kết hợp jQuery và AJAX để thực hiện việc này. Đơn giản hơn nhiều so với âm thanh. Để thấy rằng đây là câu trả lời phù hợp cho bạn, chỉ cần xem ví dụ này .
Trong ví dụ dưới đây, có hai tệp .PHP:test86a.php và test86b.php.
Tệp đầu tiên, 86A, có một hộp lựa chọn đơn giản (thả xuống) và một số mã jQuery để xem hộp lựa chọn đó thay đổi. Để kích hoạt mã jQuery, bạn có thể sử dụng jQuery .blur() hàm để theo dõi người dùng rời khỏi trường ngày tháng hoặc bạn có thể sử dụng 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");
}
});
Ở bất kỳ mức độ nào, khi jQuery được kích hoạt, một yêu cầu AJAX được gửi đến tệp thứ hai, 86B. Tệp này tự động tìm kiếm nội dung từ cơ sở dữ liệu, nhận câu trả lời, tạo một số nội dung HTML được định dạng và echo là nó trở lại tập tin đầu tiên. Tất cả điều này diễn ra thông qua Javascript, được khởi tạo trên trình duyệt - giống như bạn muốn.
Hai tệp này là một ví dụ hoạt động hoàn toàn độc lập. Chỉ cần thay thế thông tin đăng nhập và nội dung MYSQL bằng tên trường của riêng bạn, v.v. và xem điều kỳ diệu xảy ra.
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;
Đây là một ví dụ AJAX đơn giản hơn và chưa một ví dụ khác để bạn kiểm tra.
Trong tất cả các ví dụ, hãy lưu ý cách người dùng cung cấp nội dung HTML (cho dù bằng cách nhập nội dung nào đó hoặc chọn một giá trị ngày mới hoặc chọn một lựa chọn thả xuống). Dữ liệu do người dùng cung cấp là:
1) GỬI qua jQuery:var sel_stud = $('#stSelect').val();
2) sau đó SENT qua AJAX đến tập lệnh thứ hai. ($.ajax({}) thứ)
Tập lệnh thứ hai sử dụng các giá trị mà nó nhận được để tra cứu câu trả lời, sau đó HÃY CHỌN câu trả lời trở lại tập lệnh đầu tiên:echo $r;
Tập lệnh đầu tiên NHẬN câu trả lời trong hàm thành công AJAX, và sau đó (vẫn ở bên trong hàm thành công) NHẬN câu trả lời vào trang:$('#LaDIV').html(whatigot);
Vui lòng thử nghiệm với các ví dụ đơn giản này - ví dụ được liên kết đầu tiên (đơn giản hơn) không yêu cầu tra cứu cơ sở dữ liệu, vì vậy nó sẽ chạy mà không có thay đổi.
