Du kan bruge en kombination af jQuery og AJAX til at gøre dette. Meget enklere end det lyder. For at se, at dette er det rigtige svar for dig, se bare dette eksempel .
I eksemplet nedenfor er der to .PHP-filer:test86a.php og test86b.php.
Den første fil, 86A, har en simpel udvælgelsesboks (dropdown) og en eller anden jQuery-kode, der holder øje med, om den markeringsboks ændres. For at udløse jQuery-koden kan du bruge jQuery .blur() funktion til at holde øje med, at brugeren forlader datofeltet, eller du kan bruge 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");
}
});
I hvert fald, når jQuery udløses, sendes en AJAX-anmodning til den anden fil, 86B. Denne fil slår automatisk ting op fra databasen, får svarene, opretter noget formateret HTML-indhold og echo er det tilbage til den første fil. Alt dette sker gennem Javascript, initieret i browseren - præcis som du ønsker.
Disse to filer er et uafhængigt, fuldt fungerende eksempel. Bare udskift MYSQL-login og indhold med dine egne feltnavne osv. og se magien ske.
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;
Her er et mere simpelt AJAX-eksempel og alligevel et andet eksempel for dig at tjekke ud.
Bemærk i alle eksempler, hvordan brugeren leverer HTML-indholdet (enten ved at skrive noget eller vælge en ny datoværdi eller vælge et dropdown-valg). De brugerleverede data er:
1) GRABBEDE via jQuery:var sel_stud = $('#stSelect').val();
2) SEND derefter via AJAX til det andet script. ($.ajax({}) ting)
Det andet script bruger de værdier, det modtager til at slå svaret op, og EKKOER derefter svaret tilbage til det første script:echo $r;
Det første script MODTAGER svaret i AJAX succesfunktionen, og derefter (stadig inde i succesfunktionen) INJICERER svaret på siden:$('#LaDIV').html(whatigot);
Eksperimenter venligst med disse enkle eksempler -- det første (simpelere) linkede eksempel kræver ikke et databaseopslag, så det bør køre uden ændringer.