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

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

    3ca9855b3fd279fa17d46f01dc652030.jpg

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5.         <title></title>
    6.     </head>
    7.     <body>
    8.         <div>
    9.  
    10.             <div style="display: flex; flex-direction: column; margin: 15px;">
    11.                 <input id="phone" type="text" autocomplete="off" placeholder="请输入手机号" />
    12.                 <input id="code" type="text" autocomplete="off" placeholder="请输入验证码/密码" />
    13.             </div>
    14.  
    15.             <div style="margin: 15px;">
    16.                 <button onClick="login()">登录</button>
    17.             </div>
    18.  
    19.         </div>
    20.     </body>
    21.  
    22.     <script type="text/javascript">
    23.         var phoneDom = document.querySelector('#phone'); // 获取输入框内容，手机号码
    24.         var codeDom = document.querySelector('#code'); // 获取输入框内容，验证码/或密码
    25.  
    26.         /**
    27.          * 提交信息
    28.          * POST发送请求
    29.          */
    30.         function login() {
    31.             ///
    32.             // // 判断手机号码是否正确
    33.             // var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; // 手机号正则
    34.             // var phone = (phoneDom.value).trim();
    35.             // if (!phoneReg.test(phone)) {
    36.             // alert(" 请输入有效的手机号码"); // 判断手机号码是否正确
    37.             // return false;
    38.             // }
    39.  
    40.             ///
    41.             // // 判断验证码/或密码是否6位数
    42.             // var code = codeDom.value;
    43.             // if (!code || code.trim().length != 6) {
    44.             // alert("请输入6位短信验证码"); // 判断验证码/或密码是否6位数
    45.             // return false;
    46.             // }
    47.  
    48.             // 发送 JSON 数据
    49.             var data = {
    50.                 phone: phoneDom.value, // 手机号码
    51.                 verificationCode: codeDom.value, // 验证码/或密码
    52.             };
    53.  
    54.             // 创建一个 XMLHttpRequest 对象
    55.             var xhr = new XMLHttpRequest();
    56.  
    57.             // 配置请求
    58.             xhr.open('POST', 'https://api.wzyanche.com/cusInfo/login', true);
    59.             xhr.setRequestHeader('Content-Type', 'application/json');
    60.  
    61.             //发送
    62.             xhr.send(JSON.stringify(data));
    63.  
    64.             // 监听请求的状态，处理返回值
    65.             xhr.onreadystatechange = function() {
    66.                 if (xhr.readyState === 4) {
    67.                     if (xhr.status == '200') {
    68.                         //手动对数据转化
    69.                         console.log('222 000 返回的数据', xhr.response);
    70.  
    71.                         let data1 = xhr.response;
    72.                         console.log('222 111 返回的数据', data1);
    73.  
    74.                         // 打印，获取json里的对象
    75.                         var data2 = JSON.parse(xhr.responseText)
    76.                         console.log('222 222 返回的数据', data2.retMsg);
    77.  
    78.                     }
    79.                 }
    80.             }
    81.         }
    82.     </script>
    83.  
    84. </html>
  • 相关阅读:
    Hive之数据迁移方案(实测)
    Advanced .Net Debugging 3：基本调试任务（调试目标、符号、控制调试目标执行和设置断点）
    FCoE测试重启调试记录
    Scala学习(三)---函数式编程
    ExtJS类成员-辅助函数功能
    第P6周—好莱坞明星识别（2）
    【面试高频题】难度 2/5，回溯算法经典运用
    “Git 在团队协作中的优化实践“
    STL-reverse_iterator 反向迭代器
    负载均衡组件Ribbon核心-@LoadBalanced-下
  • 原文地址：https://blog.csdn.net/jun_tong/article/details/133989131