ऐसा करने के लिए आप jQuery और AJAX के संयोजन का उपयोग कर सकते हैं। जितना लगता है उससे कहीं ज्यादा सरल। यह देखने के लिए कि यह आपके लिए सही उत्तर है, बस इस उदाहरण को देखें ।
नीचे दिए गए उदाहरण में, दो .PHP फ़ाइलें हैं:test86a.php और test86b.php।
पहली फ़ाइल, 86A, में एक साधारण चयन (ड्रॉपडाउन) बॉक्स और कुछ jQuery कोड है जो उस चयन बॉक्स को बदलने के लिए देखता है। JQuery कोड को ट्रिगर करने के लिए, आप jQuery .blur() . का उपयोग कर सकते हैं उपयोगकर्ता को दिनांक फ़ील्ड छोड़ने के लिए देखने के लिए फ़ंक्शन, या आप 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");
}
});
किसी भी दर पर, जब jQuery चालू हो जाता है, तो दूसरी फ़ाइल, 86B पर एक AJAX अनुरोध भेजा जाता है। यह फ़ाइल स्वचालित रूप से डेटाबेस से सामान देखती है, उत्तर प्राप्त करती है, कुछ स्वरूपित HTML सामग्री बनाती है, और echo यह पहली फ़ाइल पर वापस आ गया है। यह सब जावास्क्रिप्ट के माध्यम से हो रहा है, ब्राउज़र पर शुरू किया गया - जैसा आप चाहते हैं।
ये दो फाइलें एक स्वतंत्र, पूरी तरह से काम कर रहे उदाहरण हैं। बस MYSQL लॉगिन और सामग्री को अपने स्वयं के फ़ील्डनाम आदि से बदलें और जादू होते देखें।
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;
यहाँ एक अधिक सरल AJAX उदाहरण है और फिर भी 13536043">एक और उदाहरण आपके देखने के लिए।
सभी उदाहरणों में, ध्यान दें कि उपयोगकर्ता HTML सामग्री की आपूर्ति कैसे करता है (चाहे कुछ टाइप करके या एक नया दिनांक मान चुनकर या ड्रॉपडाउन चयन चुनकर)। उपयोगकर्ता द्वारा प्रदत्त डेटा है:
1) jQuery के माध्यम से पकड़ा गया:var sel_stud = $('#stSelect').val();
2) फिर AJAX के माध्यम से दूसरी स्क्रिप्ट पर भेजा गया। ($.ajax({}) सामान)
दूसरी स्क्रिप्ट उत्तर को देखने के लिए प्राप्त मूल्यों का उपयोग करती है, फिर ECHOES जो पहली स्क्रिप्ट पर वापस आती है:echo $r;
पहली स्क्रिप्ट AJAX सफलता फ़ंक्शन में उत्तर प्राप्त करती है, और फिर (अभी भी सफलता फ़ंक्शन के अंदर) पृष्ठ पर उत्तर को इंजेक्ट करती है:$('#LaDIV').html(whatigot);
कृपया इन सरल उदाहरणों के साथ प्रयोग करें -- पहले (सरल) लिंक किए गए उदाहरण के लिए डेटाबेस लुकअप की आवश्यकता नहीं है, इसलिए इसे बिना किसी बदलाव के चलाना चाहिए।
