0

我是 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>
4

2 回答 2

1

onkeypress将事件更改为onclick。

如果您希望内容随着用户键入而改变，请onkeyup向文本输入元素添加一个事件。

于 2013-05-24T19:14:35.720 回答
0

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

其次，使用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/>
于 2013-05-24T19:21:58.850 回答