js的function获取input值为 [object htmlinputelement]？-CSDN博客

本文链接：https://blog.csdn.net/xufankang/article/details/82078263

解决方案在最后
实现功能：单击发送注册码按钮，异步将输入的邮箱发送到后台，实现邮箱认证功能
问题描述：在script中使用ajax向后台传递输入的邮箱时，发现js中通过id获取的是 [object htmlinputelement]

这里写图片描述

html in register.jsp

<!--==========================邮箱============================================--> 
<div class="form-style-agile">
        <i class="fas fa-user"></i>
        邮箱（Email）
        </label>
        <input placeholder="邮箱（Email）" name="email" id="_email" value="" type="text"required>
        <div id="show_state">
        <button class="div" onclick="sendEmail('show_state')">发送注册码</button>
        </div><%--div容器，显示服务页返回的内容 --%>
</div>

script in register.jsp

<script type="text/javascript">
            var xmlhttp;
            function loadXMLDoc(url,cfunc)
            {
                if (window.XMLHttpRequest)
                {// IE7+, Firefox, Chrome, Opera, Safari 代码
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// IE6, IE5 代码
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=cfunc;
                xmlhttp.open("POST",url,true);
                xmlhttp.send();
            }


            function sendEmail(divID_show){
                //divID_show:展示后台返回信息的容器
                var _email=document.getElementById("_email");
                var URL="checkEmail_servlet.jsp?email=";
                console.log("邮箱是"+_email);
                console.log("接受容器"+divID_show);
                alert("开始执行js,后台正在尝试发送邮件给"+_email);

                URL=URL+_email.value;//在地址中添加变量，用超链接传值
                alert(URL);

                loadXMLDoc(URL,function()
                        {
                            alert("提示信息！"+xmlhttp.readyState+","+ xmlhttp.status);//调试，查看xmlhttp的状态值，用于判断错误类型
                            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                            {           
                                document.getElementById(divID_show).innerHTML=xmlhttp.responseText;     
                                alert("发送成功，请查收！");
                            }                                   
                        });           
            }

        </script>

出现问题：
这里写图片描述

原因分析：十分的粗心，在获取输入框的值的时候没有添加value属性，导致获取的一个DOM节点，最后输出在浏览器上面显示的即为HTMLInputElement,不是实际的输入值
即:

var _email=document.getElementById("_email");
alert("开始执行js,后台正在尝试发送邮件给"+_email);

解决方案：添加value属性
即:

var _email=document.getElementById("_email");
alert("开始执行js,后台正在尝试发送邮件给"+_email.value);