DOM input标签输入进行服务器端数据的检索

查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络简单请求</title>
    <script>
        function showHint(str){
            var xmlhttp;
            if (str.length == 0){
                document.getElementById("textHint").innerHTML = '';
                return;
            }
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState==4 && xmlhttp.status == 200){
                document.getElementById("textHint").innerHTML = xmlhttp.responseText; 
                }
            }
            xmlhttp.open("GET",url,异步/同步);
            xmlhttp.send()
        }

    </script>

</head>
<body>
    <div>
        <form>请输入信息：
            <input type="text"id = "text1" onkeyup="showHint()">
        </form>
        <p>提示信息: <span id="txtHint"></span></p>
    </div>
</body>
</html>

 intput标签，onkeyup = "func(this.value)",当输入的内容作为参数传递给func（）函数

步骤：

获取输入框中信息

创建XMLHttpRequest()对象，

修改对象内部的onreadystatechange（）方法，当readyState属性状态值改变时会执行该方法。

创建请求open（请求类型，"/try/ajax/gethint.php?q="+str，异步/同步）//将传进来的参数发送给服务器，向服务器请求获取与输入内容相同的数据

 

posted @ 2022-02-07 21:07  qingshan剑来  阅读(51)  评论(0)  编辑  收藏  举报