ajax调用时，document.getElementById获取不到值

最新推荐文章于 2022-12-19 11:37:19 发布

原创最新推荐文章于 2022-12-19 11:37:19 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文记录了一个使用document.getElementById遇到的问题及解决过程。作者在实现Ajax请求响应时，尝试通过getElementById获取输入框值并显示响应结果，但遭遇获取失败。经过排查，发现问题在于获取元素的方法选择不当，最终更正为使用.value属性成功解决问题。

今天写ajax的一个小例子的时候，document.getElementById居然获取不到值，后来找到了，对自己很是无语。
先看jsp页面

<body>
    <script type="text/javascript">
        var req = null;
        function test() {

            var name = document.all.name.value;
            //alert(name);
            req = new XMLHttpRequest();
            //设置回调函数
            req.onreadystatechange = callBack;
            //初始化req组件
            var url = "server.jsp?name=" +name;
            req.open("GET", url,"true");
            req.send(null);
        }
        function callBack() {
            if (req.readyState == 4 && req.status == 200) {
                var result = req.responseText;
                //document.all("myError").innerHTML=result;
                //$("#myError").append(result);
                document.getElementById("myError").innerHTML=result;
            }
        }
    </script>

    <br> 用户名：
    <input type="text" id="name" name="name" onblur="test();"><br>
    <div id="myError" name="myError"></div>
</body>

跳转的jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String name=request.getParameter("name");
    //out.print(name);
    if(name==null||name.trim().length()==0){
        out.println("用户名不能为空");     
    }else if(name.trim().toUpperCase().equals("ADMIN")){
        out.println("用户名不能使用"); 
    }else{
        out.println("OK！"); 
    }
%>

document.getElementById获取不到数据，果断改了ajax的代码。

var name = document.all.name.value;
document.all("myError").innerHTML=result;

发现可以有结果。马上采用alert测试，换成之前的代码。

    //var name = document.getElementById("name").innerText;
    //var name=document.getElementById("name").innerHTML;

这时才知道错误了，应该是

    var name = document.getElementById("name").value;

当然，ajax返回的依然要用：

document.getElementById("myError").innerHTML=result;