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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA【紫光语法】

寄存器数据类型&#xff1a; reg 默认为 1 bit wide&#xff0c;如果超过 1 bit&#xff0c;则需要 range declaration 设置 reg 的位宽integer 默认位宽为 32 bit&#xff0c;不允许有 range declarationtime 默认位宽为 64 bit&#xff0c;不允许有 range declarat…

sqlmap 攻击

sqlmap 是kali 里面的工具 sqlmap对注入点注入 1 如果是 get 注入&#xff0c;直接&#xff0c;sqlmap -u "注入点网址". 2 如果是 post 注入&#xff0c;可以 sqlmap –r "burp 地址访问包” 3 如果是 cookie&#xff0c;X-Forwarded-For 等&#xff0c…

02-2、PyCharm中文乱码的三处解决方法

PyCharm中文乱码 修改处1&#xff1a; 修改处2&#xff1a;这个也没用 在Pycharm中可以创建一个模版&#xff0c;每次新建python文件时Pycharm会默认在前两行生成utf-8 #!/user/bin/env python3 # -- coding: utf-8 -- 还是乱码 再在这里设置以下 添加 &#xff1a; -Dfi…

坐标由本地坐标系转wgs84坐标系

&#xff08;1&#xff09;坐标系一&#xff1a;&#xff08;0,0,0&#xff09;为原点的本地坐标系 &#xff08;2&#xff09;坐标系二&#xff1a;wgs84坐标系 转换方法&#xff1a;proj4 关键点&#xff1a;需要知道&#xff08;0,0,0&#xff09;原点的经纬度坐标 代码&a…

IEEE754 标准存储浮点数

1. IEEE754 标准简介 IEEE754 标准是一种用于浮点数表示和运算的标准&#xff0c;由国际电工委员会&#xff08;IEEE&#xff09;制定。它定义了浮点数的编码格式、舍入规则以及基本的算术运算规则&#xff0c;旨在提供一种可移植性和一致性的方式来表示和处理浮点数 IEEE754 …

tcp/ip协议和opc协议对比详解

TCP/IP协议和OPC协议是两种重要的网络协议&#xff0c;它们在不同的网络层级上运行&#xff0c;并为数据传输和通信提供了不同的功能。 TCP/IP协议&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/互联网协议&#xff09;是互联网通信的…

基于DF模式的协作通信技术matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、DF概述 4.2、DF基本原理 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2013b 3.部分核心程序 clc; clear; close all; warning off; addpath(genpath(pwd))…

Postman —— postman的介绍和安装

Postman的介绍 Postman 是一款谷歌开发的接口测试工具,使API的调试与测试更加便捷。 它提供功能强大的 Web API & HTTP 请求调试。它能够发送任何类型的HTTP 请求 (GET, HEAD, POST, PUT..)&#xff0c;附带任何数量的参数 headers postman是一款支持http协议的接口调试与…

OpenHarmony 持久化存储 UI 状态:PersistentStorage

前两个小节介绍的 LocalStorage 和 AppStorage 都是运行时的内存&#xff0c;但是在应用退出再次启动后&#xff0c;依然能保存选定的结果&#xff0c;是应用开发中十分常见的现象&#xff0c;这就需要用到 PersistentStorage。 PersistentStorage 是应用程序中的可选单例对象…

react|redux状态管理

react|redux状态管理 参考官网&#xff1a;https://cn.redux-toolkit.js.org/tutorials/quick-start 状态管理使用流程 1、安装&#xff1a; npm install react-redux reduxjs/toolkit2、创建store.js 通过configureStore的hook对reducer&#xff08;或slice&#xff09;进行…

Linux 内核的 current

1. 进程结构体 task_struct 是描述 Linux 进程的一个结构体&#xff0c;记录着进程的信息 // include/linux/sched.h struct task_struct {volatile long state; /* -1 unrunnable, 0 runnable, >0 stopped */void *stack;atomic_t usage;unsigned int flags; /* per proc…

DAOS学习笔记及思考

DAOS带来的思考 根据daos docs的描述&#xff0c;DAOS是Intel基于NVMe全新设计开发并开源的异步对象存储&#xff0c;充分利用下一代NVMe技术的优势&#xff0c;对外提供KV存储接口&#xff0c;提供非阻塞事物I/O&#xff0c;端到端完整性&#xff0c;细粒度的数据控制&#x…

Unity的Camera类——视觉掌控与深度解析(上)

前言 摄像机在任何3D场景中都是至关重要的元素&#xff0c;尤其是在游戏和实时应用中。它定义了玩家和用户如何“看到”虚拟世界。Unity中的Camera类提供了一系列强大的工具&#xff0c;让开发者可以精细地控制渲染和视图。在本文中&#xff0c;我们将深入探索这个核心类的使用…

【Java】小计 TCP UDP的区别

面向连接 TCP面向连接&#xff0c;需要连接&#xff0c;而UDP不需要建立连接 可靠性 TCP协议通过确认应答、连接管理、流量控制、拥塞控制来确保可靠性传输&#xff1b;UDP不保证可靠性传输。 性能 TCP传输效率慢&#xff0c;需要较多的资源开销&#xff0c;UDP传输效率快&am…

某马机房预约系统 C++项目(二) 完结

8.4、查看机房 8.4.1、添加机房信息 根据案例&#xff0c;我们还是先在computerRoom.txt中直接添加点数据 //几机房 机器数量 1 20 2 50 3 1008.4.2、机房类创建 ​ 同样我们在头文件下新建一个computerRoom.h文件 添加如下代码&#xff1a; #pragma once #include<i…

pnp单目相机标定测距

参考&#xff1a;opencv 单目相机pnp测距&#xff08;Cpp&#xff09;-CSDN博客

【python】文件和异常

文件和异常 实际开发中常常会遇到对数据进行持久化操作的场景&#xff0c;而实现数据持久化最直接简单的方式就是将数据保存到文件中。说到“文件”这个词&#xff0c;可能需要先科普一下关于文件系统的知识&#xff0c;但是这里我们并不浪费笔墨介绍这个概念&#xff0c;请大…

凉鞋的 Godot 笔记 204. 语句

204. 语句 在上一篇&#xff0c;我们接触了三种常见的类型&#xff0c;如下所示&#xff1a; 这样我们算是对变量进行了一个入门了。 其实我们除了变量&#xff0c;我们还接触了一个叫做语句的概念。 我们可以看下代码: extends Node# Called when the node enters the sce…

IDEA配置HTML和Thymeleaf热部署开发

IDEA配置HTML和Thymeleaf热部署开发 1.项目配置2. IDEA配置3. 使用 需求&#xff1a;现在我们在开发不分离项目的时候&#xff08;SpringBootThmeleaf&#xff09;经常会改动了类或者静态html文件就需要重启一下服务器&#xff0c; 这样不仅时间开销很大&#xff0c;而且经常重…

PageHelper基础知识

使用场景 便用mybatis&#xff0c;可以用 pagehelper 分页 。 maven依赖 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>4.1.6</version> </dependency>PageHelper配…