W tym celu możesz użyć kombinacji jQuery i AJAX. O wiele prostsze niż się wydaje. Aby zobaczyć, że jest to właściwa odpowiedź dla Ciebie, po prostu obejrzyj ten przykład .
W poniższym przykładzie znajdują się dwa pliki .PHP:test86a.php i test86b.php.
Pierwszy plik, 86A, ma proste pole wyboru (rozwijane) i trochę kodu jQuery, który obserwuje, czy to pole wyboru się zmienia. Aby wyzwolić kod jQuery, możesz użyć jQuery .blur() funkcja obserwowania, czy użytkownik opuszcza pole daty, lub możesz użyć 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");
}
});
W każdym razie, po uruchomieniu jQuery, żądanie AJAX jest wysyłane do drugiego pliku, 86B. Ten plik automatycznie wyszukuje rzeczy z bazy danych, pobiera odpowiedzi, tworzy sformatowaną zawartość HTML i echo czy to z powrotem do pierwszego pliku. Wszystko to dzieje się za pomocą JavaScript, inicjowanego w przeglądarce - tak jak chcesz.
Te dwa pliki stanowią niezależny, w pełni działający przykład. Po prostu zastąp loginy i zawartość MYSQL własnymi nazwami pól itp. i obserwuj, jak dzieje się magia.
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;
Oto prostszy przykład AJAX a jednak inny przykład do wymeldowania.
We wszystkich przykładach zwróć uwagę, w jaki sposób użytkownik dostarcza treść HTML (czy to wpisując coś, wybierając nową wartość daty lub wybierając z listy rozwijanej). Dane podane przez użytkownika to:
1) CHWYTAJ przez jQuery:var sel_stud = $('#stSelect').val();
2) następnie WYSŁANE przez AJAX do drugiego skryptu. ($.ajax({}) rzeczy)
Drugi skrypt używa otrzymanych wartości, aby wyszukać odpowiedź, a następnie ECHA, które odpowiadają z powrotem do pierwszego skryptu:echo $r;
Pierwszy skrypt OTRZYMUJE odpowiedź w funkcji sukcesu AJAX, a następnie (nadal wewnątrz funkcji sukcesu) WSTAWIA odpowiedź na stronę:$('#LaDIV').html(whatigot);
Poeksperymentuj z tymi prostymi przykładami — pierwszy (prostszy) połączony przykład nie wymaga wyszukiwania w bazie danych, więc powinien działać bez zmian.
