html web前端，登录，post请求提交 json带参

3ca9855b3fd279fa17d46f01dc652030.jpg


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <div>
 
            <div style="display: flex; flex-direction: column; margin: 15px;">
                <input id="phone" type="text" autocomplete="off" placeholder="请输入手机号" />
                <input id="code" type="text" autocomplete="off" placeholder="请输入验证码/密码" />
            </div>
 
            <div style="margin: 15px;">
                <button onClick="login()">登录</button>
            </div>
 
        </div>
    </body>
 
    <script type="text/javascript">
        var phoneDom = document.querySelector('#phone'); // 获取输入框内容，手机号码
        var codeDom = document.querySelector('#code'); // 获取输入框内容，验证码/或密码
 
        /**
         * 提交信息
         * POST发送请求
         */
        function login() {
            ///
            // // 判断手机号码是否正确
            // var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; // 手机号正则
            // var phone = (phoneDom.value).trim();
            // if (!phoneReg.test(phone)) {
            // alert(" 请输入有效的手机号码"); // 判断手机号码是否正确
            // return false;
            // }
 
            ///
            // // 判断验证码/或密码是否6位数
            // var code = codeDom.value;
            // if (!code || code.trim().length != 6) {
            // alert("请输入6位短信验证码"); // 判断验证码/或密码是否6位数
            // return false;
            // }
 
            // 发送 JSON 数据
            var data = {
                phone: phoneDom.value, // 手机号码
                verificationCode: codeDom.value, // 验证码/或密码
            };
 
            // 创建一个 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
 
            // 配置请求
            xhr.open('POST', 'https://api.wzyanche.com/cusInfo/login', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
 
            //发送
            xhr.send(JSON.stringify(data));
 
            // 监听请求的状态，处理返回值
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status == '200') {
                        //手动对数据转化
                        console.log('222 000 返回的数据', xhr.response);
 
                        let data1 = xhr.response;
                        console.log('222 111 返回的数据', data1);
 
                        // 打印，获取json里的对象
                        var data2 = JSON.parse(xhr.responseText)
                        console.log('222 222 返回的数据', data2.retMsg);
 
                    }
                }
            }
        }
    </script>
 
</html>

相关阅读:
代码随想录算法训练营Day 55 || 583. 两个字符串的删除操作、72. 编辑距离
基于springboot+Vue+ Element-Plus+mysql实现学生宿舍管理系统
java基于springboot+vue的宠物领养饲养交流管理平台nodejs前后分离
java医药配送服务系统ssm447
前端笔记：Create React App 初始化项目的几个关键文件解读
go-zero服务自动收集线上问题线上实战
改进YOLOv5系列：30.结合即插即用的动态卷积ODConv
QT实现将两个时间相加的算法[hh: mm + hh: mm]
艾美捷Cas9核酸酶应用说明及实例展示
C++基础02

原文地址：https://blog.csdn.net/jun_tong/article/details/133989131