हां आपको यहां अजाक्स का उपयोग करने की ज़रूरत है। निम्नलिखित कोड और नोट्स की जाँच करें।
वह फ़ंक्शन लिखें जो ActiveXObject()
लौटाता है जो एक अजाक्स कॉल के रूप में करेगा
function getXMLHTTP() {
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
xmlhttp = false;
}
}
}
}
return xmlhttp;
}
फिर अपनी साइट के लिए एक विशिष्ट फ़ंक्शन लिखें जो वांछित डेटा प्राप्त करेगा
function getProducts(){
var select1 = document.getElementById("cboCategory");
var strURL = "getproducts.php?city="+select1.options[select1.selectedIndex].value;
var req = getXMLHTTP(); // function to get xmlhttp object
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) { // data is retrieved from server
if (req.status == 200) { // which reprents ok status
document.getElementById('productsdiv').innerHTML = req.responseText; // div to be updated
} else {
alert("[GET Products]There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
};
req.open("GET", strURL, true); // open url using get method
req.send(null);
}
}
इस फ़ंक्शन को cboCategory
. के परिवर्तन ईवेंट पर कॉल किया जाएगा विकल्प चुनें, इसलिए संबंधित html होगा
<select onchange="getProducts()" id="cboCategory" class="box">
...
</select>
<!-- Can be anywhere on same page -->
<div id="productdiv"> </div>
आपका getproduct.php पृष्ठ एक html को स्ट्रिंग के रूप में लौटाएगा जो producstdiv
की सामग्री को अधिलेखित कर देगा अपने एचटीएमएल पेज में टैग करें।
आप php से json के रूप में भी डेटा वापस कर सकते हैं . अधिक जानकारी के लिए इसका टैग विकी देखें। इसके अलावा आप jquery का उपयोग कर सकते हैं अजाक्स कॉल करने के लिए।