AJAX - PHP - 内容未加载

问题描述：

I am new in AJAX.

I am trying to load some content from my PHP file into the load.html. i made the function on the onKeyUp Event of a textbox.

But its always showing "UNDEFINED" as the output . :(

Please help me

The load.html file

<!DOCTYPE html>
<html>
    <head>
        <script>
            function NickName(nick){
                var xmlhttp;
                if(window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.status==200 && xmlhttp.readyState ==4){
                        document.getElementById("divNick").innerHTML = xmlhttp.reponseText;
                    }
                }
                xmlhttp.open("GET","myphp.php?key="+nick,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <div id="divNick"></div>
        <input type="text" id="text_box" onKeyUp="NickName(this.value)">
    </body>
</html>

And the myphp.php file

<?php

if(isset($_GET['key']))
{
    $key = $_GET['key'];

    $choice1 = "Shifar";
    $choice2 = "Nidal";

    if($key==$choice1)
    {
        echo "Shifz";
    }
    else if($key==$choice2)
    {
        echo "Steavz";
    }
    else
    {
        echo "No Match Found";
    }

}




?>

Thanks in Advance. Shifar Shifz

我是AJAX的新手。 p>

我正在尝试加载一些内容从我的PHP文件到load.html。我在文本框的onKeyUp事件上创建了该函数。 p>

但它始终显示“UNDEFINED”作为输出。 :( p>

请帮助我 p>

load.html文件 strong> p>

  ＆lt;！DOCTYPE html＆gt; 
＆lt; html＆gt; 
＆lt; head＆gt; 
＆lt; script＆gt; 
函数NickName（nick）{
 var xmlhttp; 
 if（window.XMLHttpRequest）{
  xmlhttp = new XMLHttpRequest（）; 
} else {
 xmlhttp = new ActiveXObject（“Microsoft.XMLHTTP”）; 
} 
 xmlhttp.onreadystatechange = function（）{
 if（xmlhttp.status == 200＆amp;  ;＆amp; xmlhttp.readyState == 4）{
 document.getElementById（“divNick”）。innerHTML = xmlhttp.reponseText; 
} 
} 
 xmlhttp.open（“GET”，“myphp.php？key  =“+ nick，true）; 
 xmlhttp.send（）; 
} 
＆lt; / script＆gt; 
＆lt; / head＆gt; 
＆lt; body＆gt; 
＆lt; div id =”divNick“＆gt  ;＆lt; / div＆gt; 
＆lt; input type =“text”id =“text_box”onKeyUp =  “NickName（this.value）”＆gt; 
＆lt; / body＆gt; 
＆lt; / html＆gt; 
  code>  pre> 
 
  以及myphp.php文件  p> 
 
 
 ＆lt;？php 
 
if（isset（$ _ GET ['key']））
 {
 $ key = $ _GET ['key  ']; 
 
 $ choice1 =“Shifar”; 
 $ choice2 =“Nidal”; 
 
 if if（$ key == $ choice1）
 {
 echo“Shifz”; 
} \ 否则if（$ key == $ choice2）
 {
 echo“Steavz”; 
} 
 else 
 {
 echo“No Match Found”; 
} 
 
} 
 
 \  n 
 
 
？＆gt; 
  code>  pre> 
 
 先谢谢。
Shifar Shifz  p> 
  div>

答

its because you dint specify the correct function name.

You defined a function named NickName and called another named NicKName

updated to comments

its coming as undefined because of another typo u made xmlhttp.reponseText instead of xmlhttp.responseText

答

There is typo. your function name is NickName you are calling NicKName. K is capital

Change document.getElementById("divNick").innerHTML = xmlhttp.reponseText;

to document.getElementById("divNick").innerHTML = xmlhttp.responseText;

again a typo. reponseText --> responseText

答

Try like this :

xmlhttp.open("GET","myphp.php?key="+nick,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

xmlhttp.onreadystatechange = function()
{
    if(xmlhttp.status==200 && xmlhttp.readyState ==4)
    {
        document.getElementById("divNick").innerHTML = xmlhttp.reponseText;
    }
}

I think the order is important and NickName is not NicKName

答

I can see there is a typo error in your function name. When you call the function you have used NicKName but the function is actually defined as NickName. the (k) is capitalized in your calling statement.

Other advice for you, write Ajax like you have done is a very old approach. And most importantly you will have a great deal of coding for many browsers...you are supposed to deal with all the browsers out there. So why don't you use other ajax approach. I advice you to use jQuery $.ajax. Its very simple and handles all the cross-browser compatibility issues.

For eg. the above line of code could be replaced with....

$('#divNick').load('myphp.php?key='+nick);

Just one line. the other is you can also use the $.ajax which can let you do both POST and GET requests as you wish.

Most important you have said you are new to Ajax. If so why don't you already start reading about jQuery...besides its very rewarding in both by saving you time and when you are done, you will see how many job position require jquery as a skill set.

Hope this will help.

答

Spelling mistake on your ajax code Instead of - document.getElementById("divNick").innerHTML = xmlhttp.responseText; You typed - document.getElementById("divNick").innerHTML = xmlhttp.reponseText;

AJAX - PHP - 内容未加载

updated to comments

相关推荐