解决方案在最后
实现功能:单击发送注册码按钮,异步将输入的邮箱发送到后台,实现邮箱认证功能
问题描述:在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);