K tomu můžete použít kombinaci jQuery a AJAX. Mnohem jednodušší, než to zní. Chcete-li vidět, že je to pro vás správná odpověď, Podívejte se na tento příklad .
V níže uvedeném příkladu jsou dva soubory .PHP:test86a.php a test86b.php.
První soubor, 86A, má jednoduchý výběr (rozbalovací) pole a nějaký kód jQuery, který sleduje, zda se toto pole výběru nezmění. Ke spuštění kódu jQuery můžete použít jQuery .blur() funkce, abyste sledovali, zda uživatel neopustí pole data, nebo můžete použít 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");
}
});
V každém případě, když je spuštěn jQuery, je odeslán požadavek AJAX do druhého souboru, 86B. Tento soubor automaticky vyhledá věci z databáze, získá odpovědi, vytvoří nějaký formátovaný obsah HTML a echo je to zpět k prvnímu souboru. To vše se děje prostřednictvím Javascriptu, který se spouští v prohlížeči – přesně tak, jak chcete.
Tyto dva soubory jsou nezávislým, plně funkčním příkladem. Stačí nahradit přihlašovací údaje a obsah MYSQL svými vlastními názvy polí atd. a sledovat, jak se kouzlo stane.
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;
Zde je jednodušší příklad AJAX a přesto další příklad abyste se mohli podívat.
Ve všech příkladech si všimněte, jak uživatel dodává obsah HTML (zda něco napíše, vybere novou hodnotu data nebo vybere rozevírací seznam). Údaje poskytnuté uživatelem jsou:
1) ZAJIŠTĚNO přes jQuery:var sel_stud = $('#stSelect').val();
2) pak ODESLAT přes AJAX do druhého skriptu. ($.ajax({}) věci)
Druhý skript používá hodnoty, které obdrží, k vyhledání odpovědi a poté OZVY, které odpoví zpět na první skript:echo $r;
První skript PŘIJÍMÁ odpověď ve funkci úspěchu AJAX a poté (stále uvnitř funkce úspěchu) VSTŘEDÍ odpověď na stránku:$('#LaDIV').html(whatigot);
Experimentujte prosím s těmito jednoduchými příklady – první (jednodušší) propojený příklad nevyžaduje vyhledávání v databázi, takže by měl běžet beze změn.