html文件Js写输入框和弹框调接口jQuery

 业务场景：需要使用写一个html文件，实现输入数字，保存调接口。

1、使用 JS原生写法， fetchAPI调接口，使用 alert 方法弹框会阻塞线程，所以写了一个弹框。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {/* 清空上下边距*/margin: 0;padding: 0;}.container {display: flex;justify-content: center;align-items: center;height: 80vh;}.form-group {padding: 20px;border-radius: 10px;width: 200px;display: flex;flex-direction: column;align-items: center;/* background-color: lightblue; */}.name {width: 200px;text-align: left;font-size: 16px;font-weight: 400;font-family: MicrosoftYaHei;}input {margin-top: 10px;padding: 5px;font-size: 14px;width: 185px;outline: none;/* 去掉焦点边框 */}button {padding: 8px 15px;font-size: 16px;line-height: 16px;background-color: #0C52C3;color: white;border: none;border-radius: 6px;cursor: pointer;margin-top: 20px;&:hover {background-color: #5586d5;}}#tip-box {position: fixed;top: 15%;left: 50%;transform: translate(-50%, -50%);width: 400px;border: 1px solid #ccc;border-radius: 15px;box-shadow: 0 0 10px rgba(0, 0, 0, .2);padding: 10px 20px;background-color: #fff;z-index: 99999;text-align: left;animation: tip-show .3s forwards;}.tip-header {font-size: 16px;font-weight: bold;color: #333;padding: 9px 6px 3px;}.close-btn {float: right;margin: 10px;}/* .close-btn:hover {background-color: #ccc;} */.tip-content {font-size: 14px;color: #333;padding: 8px 6px;}@keyframes tip-show {0% {opacity: 0;}100% {opacity: 1;}}@keyframes tip-hide {0% {opacity: 1;}100% {opacity: 0;}}</style><script src="jquery.min.js"></script></head><body><div class="container"><div class="form-group"><div class="name">请输入累计热量(GJ)</div><input type="number" name="" id="input" class="form-control" value="" min="0" step="0.01" required="required"title="" placeholder="0.00" required="required" onblur="handleInputChange(event)"onkeydown="handlekeyDown(event)" /><button class="btn btn-primary" onclick="handleButtonClick()">保存</button></div><div id="tip-box" style="display: none;" onclick="hideTip()"><div class="tip-header">提示</div><div class="tip-content">提示内容</div><button class="close-btn" onclick="hideTip()">确定</button></div></div><script>let url = 'http://1x.1x.6.1xxx:12xxx';let api = '/base/xxxxxDXZZConfig';function handleInputChange(event) {event.target.value = Number(event.target.value).toFixed(2);}function handlekeyDown(event) {console.log(event);if (event.keyCode === 69) {event.preventDefault();}}function handleButtonClick() {let value = input.value;console.log(value);if (!value) {showTip('请输入有效的数值');return;}let data = { value };// 使用 URLSearchParams 将数据对象转换为查询字符串let params = new URLSearchParams(data).toString();let requestUrl = `${url}${api}?${params}`;let options = { method: "GET" }try {fetch(requestUrl, options).then(res => res.json()).then(json => {console.log(json);if (json.code == '0') {showTip('保存成功');} else {showTip(json.msg);}input.value = null;}).catch(error => {showTip('请求失败，请稍后再试');console.error('Fetch Error:', error);input.value = null;});} catch (error) {showTip('请求失败，请稍后再试');console.error('Fetch Error:', error);input.value = null;}}var tipBox = document.querySelector('#tip-box');var closeBtn = tipBox.querySelector('.close-btn');function showTip(message) {tipBox.querySelector('.tip-content').innerHTML = message;tipBox.style.display = 'block';}function hideTip() {tipBox.style.animation = 'tip-hide .3s forwards';setTimeout(function () {tipBox.style.display = 'none';tipBox.style.animation = '';}, 300);}</script>
</body></html>

 2、使用jQuery，先 npm install jquery，然后引入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表底录入</title><style>* {/* 清空上下边距*/margin: 0;padding: 0;}.container {display: flex;justify-content: center;align-items: center;height: 80vh;}.form-group {padding: 20px;border-radius: 10px;width: 200px;display: flex;flex-direction: column;align-items: center;/* background-color: lightblue; */}.name {width: 200px;text-align: left;font-size: 16px;font-weight: 400;font-family: MicrosoftYaHei;color: #333;}input {margin-top: 10px;padding: 5px;font-size: 14px;width: 185px;outline: none;/* 去掉焦点边框 */color: #333;}button {padding: 8px 15px;font-size: 16px;line-height: 16px;background-color: #0C52C3;color: white;border: none;border-radius: 6px;cursor: pointer;margin-top: 20px;&:hover {background-color: #5586d5;}}#tip-box {position: fixed;top: 15%;left: 50%;transform: translate(-50%, -50%);width: 400px;border: 1px solid #ccc;border-radius: 15px;box-shadow: 0 0 10px rgba(0, 0, 0, .2);padding: 10px 20px;background-color: #fff;z-index: 99999;text-align: left;animation: tip-show .3s forwards;}.tip-header {font-size: 16px;font-weight: bold;color: #333;padding: 9px 6px 3px;}.close-btn {float: right;margin: 10px;}.tip-content {font-size: 14px;color: #333;padding: 8px 6px;}</style><script src="./node_modules/jquery/dist/jquery.min.js"></script></head><body><div class="container"><div class="form-group"><div class="name">请输入累计热量(GJ)</div><input type="number" name="" id="input" class="form-control" value="" min="0" step="0.01" required="required"title="" placeholder="0.00" required="required" onblur="handleInputChange(event)"onkeydown="handlekeyDown(event)" /><button class="btn btn-submit">保存</button></div><div id="tip-box" style="display: none;"><div class="tip-header">提示</div><div class="tip-content">提示内容</div><button class="close-btn">确定</button></div></div><script>let url = 'http://1x.1x.6.1xxx:12xxx';let api = '/base/xxxxxDXZZConfig';function handleInputChange(event) {event.target.value = Number(event.target.value).toFixed(2);}function handlekeyDown(event) {// 阻止键盘输入e的情况if (event.keyCode === 69) {event.preventDefault();}}// 点击保存$('.btn-submit').click(function () {let value = input.value;console.log(value);if (!value) {$('.tip-content').html('请输入有效的数值')$('#tip-box').show();return;}let requestUrl = `${url}${api}`;$.ajax({type: 'GET',url: requestUrl,data: { value },success: function (res) {console.log(res);if (res.code == '0') {$('.tip-content').html('保存成功');$('#tip-box').show();} else {$('.tip-content').html(res.msg);$('#tip-box').show();}input.value = null;},error: function (xhr, status, error) {console.error('请求失败: ' + status + ' - ' + error);input.value = null;}})})$('.close-btn').click(function () {$('#tip-box').hide()})$('#tip-box').click(function () {$('#tip-box').hide()})</script>
</body></html>

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

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

相关文章

飞书文档如何转markdown

飞书文档如何转markdown

飞书文档如何转markdown 实现效果实现步骤其他方法 实现效果 导出的结果挂在这了 https://thinkasany.github.io/docs/#/ 实现步骤 以https://upyun.feishu.cn/docx/KERsd1DpioPb1xxye9VcuXbhnBC这篇文章为例 使用工具 https://github.com/Wsine/feishu2md&#xff0c;提供了…
阅读更多...
汽车制造厂批量使用成华制造弹簧平衡器

汽车制造厂批量使用成华制造弹簧平衡器

数年来&#xff0c;成华制造都在不断的向各行各界输出着自己的起重设备&#xff0c;与众多企业达成合作&#xff0c;不断供应优质产品。近些年&#xff0c;成华制造以其卓越的产品质量和高效的生产能力&#xff0c;成功实现了弹簧平衡器的大规模批量供应&#xff0c;为重庆数家…
阅读更多...
python dash call_back 多output 7

python dash call_back 多output 7

效果 代码 # 导入Dash库及其相关组件&#xff0c;用于构建交互式Web应用 from dash import Dash, dcc, html, Input, Output, callback# 定义一个外部样式表&#xff0c;用于美化应用界面 external_stylesheets [https://codepen.io/chriddyp/pen/bWLwgP.css]# 创建一个D…
阅读更多...
【Spring实战】13 Security+Thymeleaf自定义登录页面

【Spring实战】13 Security+Thymeleaf自定义登录页面

文章目录 1. 执行流程2. 为什么要自定义登录页面3. 创建登录页面4. 配置 Spring Security5. 创建请求 API6. 启动服务7. 验证8. 代码详细总结 Spring Security 是一个强大的身份验证和访问控制框架&#xff0c;而 Thymeleaf 是一个用于构建动态 Web 页面的强大模板引擎。结合它…
阅读更多...
RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记

RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记

RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记 一、Abstract二、引言三、相关工作3.1 Semantic Segmentation and Embeddings3.2 Referring Expression Comprehension3.3 Referring Image Segmentation 四、方法4.1 视觉表示4.2 文本表示…
阅读更多...
macos下转换.dmg文件为 .iso .cdr文件的简单方法

macos下转换.dmg文件为 .iso .cdr文件的简单方法

为了让镜像文件在mac 和windows平台通用, 所以需要将.dmg格式的镜像文件转换为.iso文件, 转换方法也非常简单, 一行命令即可 hdiutil convert /path/to/example.dmg -format UDTO -o /path/to/example.iso 转换完成后的文件名称默认是 example.iso.cdr 这里直接将.cdr后缀删…
阅读更多...
进阶学习——Linux系统服务器硬件认识与RAID磁盘

进阶学习——Linux系统服务器硬件认识与RAID磁盘

目录 一、服务器知识补充 1.硬件 2.服务器常见故障 二、认识RAID 1.什么是RAID 2.RAID的优点 3.RAID的实现方式 三、RAID磁盘陈列 1.RAID 0 磁盘陈列介绍——RAID 0 2.RAID 1 磁盘陈列介绍——RAID 1 3.RAID 5 磁盘陈列介绍——RAID 5 4.RAID 6 磁盘陈列介绍——RA…
阅读更多...
【Web】vulhub-httpd apache解析漏洞复现(1)

【Web】vulhub-httpd apache解析漏洞复现(1)

目录 ①CVE-2017-15715 ②apache_parsing_vulnerability ①CVE-2017-15715 贴出源码&#xff1a; <?php if(isset($_FILES[file])) {$name basename($_POST[name]);$ext pathinfo($name,PATHINFO_EXTENSION);if(in_array($ext, [php, php3, php4, php5, phtml, pht]))…
阅读更多...
TOGAF架构开发方法

TOGAF架构开发方法

TOGAF针对架构开发方法定义了一系列阶段和步骤&#xff0c;这些阶段和步骤对架构的迭代过程进行了详细、标准的描述。 企业架构的项目过程 一、预备阶段&#xff08;Preliminary&#xff09; 1、目标 预备阶段的目标是&#xff1a; 对组织的背景和环境进行审查&#xff08;调…
阅读更多...
简单vlan划分和dhcp中继（Cisco Packet Tracer模拟）

简单vlan划分和dhcp中继（Cisco Packet Tracer模拟）

文章目录 1. 前言2. 功能实现2.1. dhcp服务器接入2.2. 学校web服务器2.3. 设置学校dns服务器2.4. 设置线路冗余2.5. 配置ac。 1. 前言 在这里我们的计网作业是使用思科的Cisco Packet Tracer进行对校园网的简单规划&#xff0c;这里我对校园网进行了简单的规划&#xff0c;功能…
阅读更多...
优化算法3D可视化

优化算法3D可视化

编程实现优化算法&#xff0c;并3D可视化 1. 函数3D可视化 分别画出 和 的3D图 import numpy as np from matplotlib import pyplot as plt import torch# 画出x**2 class Op(object):def __init__(self):passdef __call__(self, inputs):return self.forward(inputs)def for…
阅读更多...
python+django游戏分享论坛网站49c2c

python+django游戏分享论坛网站49c2c

本系统主要包括管理员和用户两个角色组成&#xff1b;主要包括首页、个人中心、用户管理、游戏类型管理、游戏文章管理、交流论坛、系统管理等功能的管理系统。 系统权限按管理员和用户两类涉及用户划分。 &#xff08;1&#xff09;管理员功能需求 管理员登陆后&#xff0c;主…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023