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

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>
相关推荐
hong_zc4 小时前
初始 html
前端·html
赛丽曼4 小时前
Python中的HTML
python·html
前端Hardy4 小时前
探索 HTML 和 CSS 实现的 3D 开关按钮
css·3d·html
小小吱4 小时前
HTML动画
前端·html
Bio Coder4 小时前
学习用 Javascript、HTML、CSS 以及 Node.js 开发一个 uTools 插件,学习计划及其周期
javascript·学习·html·开发·utools
钢铁小狗侠5 小时前
前端(1)——快速入门HTML
前端·html
少年维持着烦恼.6 小时前
第八章习题
前端·css·html
我是哈哈hh6 小时前
HTML5和CSS3的进阶_HTML5和CSS3的新增特性
开发语言·前端·css·html·css3·html5·web
成都被卷死的程序员11 小时前
响应式网页设计--html
前端·html
fighting ~11 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html