du77887
du77887
2014-07-22 10:42
浏览 27

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • dongmaqiu6084
    dongmaqiu6084 2014-07-22 10:50
    已采纳

    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

    点赞 评论
  • doulan9287
    doulan9287 2014-07-22 10:50

    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

    点赞 评论
  • douchensi8625
    douchensi8625 2014-07-22 10:53

    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

    点赞 评论
  • donqo88682
    donqo88682 2014-07-22 11:00

    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.

    点赞 评论
  • doujiao4710
    doujiao4710 2014-07-22 12:08

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

    点赞 评论

相关推荐