Question

我是Ajax的新手，当用户在输入字段中键入内容但没有任何反应时，此代码应实时动态更改div。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <!--api to use ajax-->
    <script type="text/javascript" src="sarissa/gr/abiss/js/sarissa/sarissa.js"> </script>
    <title>Ajax Test</title>

    <script>
        function loadXMLDoc() {

            var xmlhttp;
            //parameter
            var suggest = document.getElementById("searchbox").value;

            //using XMLHttpRequest
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //when xmlhttp be ready...
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //the HTML will be modify
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

            //the file that will receive and retrieve info
            xmlhttp.open("POST","enviar.php",true);

            //header to the retrieved information
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //the param will be send
            var sendParam = "fname="+suggest;
            xmlhttp.send(sendParam);
        }

</script>
</head>
<body>
Busca: <input type="text" id="searchbox" />
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onkeypress="loadXMLDoc()">Change Content</button>

</body>
</html>

Answer 1

将onkeypress事件更改为onclick。

如果您希望在用户输入时更改内容，请在文本输入元素中添加onkeyup事件。

Answer 2

首先，你应该把你的javascript代码放在你的HTML输入之前，因为DOM需要加载整个文档，然后才能对其进行处理。否则，您应该使用onload属性将函数放在body标记内。

第二，使用onclick事件而不是onkeypress，我修改了你的脚本并测试了它。它现在有效

<html>
<head></head>
<body>

 Busca: <input type="text" id="searchbox" />
 <div id="myDiv"><h2>Let AJAX change this text</h2></div>
 <button type="button" onclick="loadXMLDoc()">Change Content</button>

 <script type='text/javascript'>
        function loadXMLDoc() {
            var xmlhttp;
            //using XMLHttpRequest
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else
            {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //when xmlhttp be ready...
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //the HTML will be modify
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

                        //parameter
            var suggest = document.getElementById("searchbox").value;


               var sendParam = "fname="+suggest;
            //the file that will receive and retrieve info
            xmlhttp.open("POST","enviar.php",true);

            //header to the retrieved information
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //the param will be send

            xmlhttp.send(sendParam);
            console.log(xmlhttp);
        }

</script>

<body/>

如何实时更改div？

2 个答案: