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>
相关推荐
看到请催我学习1 小时前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
l1x1n03 小时前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
Q_w77423 小时前
一个真实可用的登录界面!
javascript·mysql·php·html5·网站登录
惜.己5 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
神之王楠6 小时前
如何通过js加载css和html
javascript·css·html
茶卡盐佑星_7 小时前
meta标签作用/SEO优化
前端·javascript·html
金灰7 小时前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5
Zheng1139 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
软件开发技术深度爱好者10 小时前
用HTML5+CSS+JavaScript庆祝国庆
javascript·css·html5
酷酷-1 天前
彩虹易支付最新版源码及安装教程(修复BUG+新增加订单投诉功能)
html·php·bug