用XMLHttpRequest获取参数值并验证返回结果_xml格式响应怎么取参-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48047636/article/details/123995320

博客介绍了如何使用XMLHttpRequest获取用户输入的用户名和密码，然后通过Ajax调用login接口进行验证。当输入为'tom'和'123'时，返回验证成功；否则返回登录失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用XMLHttpRequest获取用户输入的值并验证用户名和密码是否符合服务器上的数据并返回结果

<body>
    <form action="">
        用户名:<input type="text" value="" placeholder="用户名"  id="uname" >
        <span id="msg1"></span><br>

        密码: <input type="password" id="upwd" value='' placeholder="请输入密码">
        <span id="upwdmsg"></span><br>

        <input type="button" value="提交" id="btn">
       </form>
        <script>
             btn.onclick=function(){ 
             var reg= /^[a-zA-Z0-9]{3,11}$/;       
                 if(!reg.test(uname.value)){
                     msg1.innerHTML='用户格式错误';
                     return;
                 }
                 if(!reg.test(uname.value)){
                    upwdmsg.innerHTML='密码格式错误';
                     return;
                 }  
                 //养成习惯 对用户输入的东西自己要确定拿到手，自己要验证一遍 比如下面的alert能出现那就是前面的代码是正确的             
                // alert(uname.value+upwd.value); 
                 //1.创建对象
                 var xhr=new XMLHttpRequest();
                 //2.指定请求方式,指定服务器地址,指定是否异步
                 xhr.open('POST','http://127.0.0.1:3000/login',true);
                 //3.指定post请求的数据类型
                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                 var data=`name=${uname.value}&pwd=${upwd.value}`
                 alert(data);//试一下是否拿到参数
                 //4.发送
                 xhr.send(data);
                 //5.接收服务器返回的数据
                 setTimeout(function(){
                     console.log(xhr.responseText);
                 },1000);
             }
        </script>   
</body>