So the function is pretty simple(Not so much for me!), it takes an HTML form, and upon selecting a drop down option, it sends the option value to index.php and get's a response, based on the response it changes the content of the page! But it keeps coming back "Undefined"... I am running the webpage off of localhost/index.php with XAMPP.
<div id="currentactivity">
<table width="800" border="1">
<tr><td colspan="2"><br /><center><h2>Dynamically change page content with Ajax & PHP</h2></center></td>
</tr>
<tr>
<td width="200">
<form>
<select name="Data" onChange="showData(this.value)">
<option value="">Select page Content:</option>
<option value="1">Page Content 1</option>
<option value="2">Page Content 2</option>
<option value="3">Page Content 3</option>
<option value="4">Page Content 4</option>
</select>
</form>
</td>
<td><div id="showData">Use the select box to change page content</div></td>
</tr>
</table>
</div>
Below is the JavaScript function. (I currently have it run through an outside .js script, but I have tried the function straight out of the section and it did the exact same thing!)
function showData(str)
{
if (str=="")
{
document.getElementById("showData").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("showData").innerHTML=xmlhttp.resonseText;
}
}
xmlhttp.open("GET","index.php?q="+str,true);
xmlhttp.send();
}
And the below is my PHP page (Yes this is directly ripped off of a tutorial website!)
<?php
$q=$_GET["q"];
if ($q==1) {echo "Page Content 1 would be shown";}
if ($q==2) {echo "Page Content 2 would be shown";}
if ($q==3) {echo "Page Content 3 would be shown";}
if ($q==4) {echo "Page Content 4 would be shown";}
?>
这个xmlhttp.resonseText
应该是xmlhttp.responseText
I believe that the following html:
<select name="Data" onChange="showData(this.value)">
might work on some but not all browsers... I think you should use this instead:
<select name="Data" onChange="showData(this.options[this.selectedIndex])">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.