利用formdata自动序列化和xhr上传表单到后端
//FormData对象是XMLHTTPRequest level2新增的类型，它可以自动序列化表单内容，不再需要我们去写序列化表单方法；
FormData()即可以直接把整个表单给它，也可以分别使用append(‘字段’,‘值’)方法给FormData()；
现在就结合xhr写一个简单示例，怎么把表单传递给后端
<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><title>测试xhr和formdata</title></head><body><div id="regform"><form id="regniter" name="reg" method="post" action=""><label><div class="inputStyle">用户名：<input type="text" name="username" value=""/></div></label><label><div class="inputStyle">密 码：<input type="password" name="pwd" value=""/></div> </label><label><div class="inputStyle"><input type="button" name="submit1" value="提交"/></div></label></form></div><script>let btn=document.getElementsByName("submit1");btn[0].addEventListener("click",function(){let xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState===4){try{if((xhr.status>=200&& xhr.status<300) || xhr.status===304){//获取从后端返回的数据let dataarr=JSON.parse(xhr.response);console.log(dataarr);}else{console.log("连接后端不成功：",xhr.status);}}catch(ex){xhr.ontimeout=function(){alert('连接超时');};}}};xhr.open("post","regniter.php");let form1=document.forms[0];let username=form1.elements['username'].value;let pwd=form1.elements['pwd'].value;//设置超时为5秒xhr.timeout=5000;//设置重写xhr响应的mime类型，这里是json类型，也可以写成application/json形式xhr.overrideMimeType("text/json");if(username!=="" && pwd!==""){let data=new FormData(form1);xhr.send(data);/*这里是单独设置字段/值,效果和上面是一样的data.append('username')=username;data.append('pwd)=pwd;xhr.send(data);*/form1.elements['submit1'].disabled=true;console.log('已经发送');}})</script></body>
</html>
//这里是后端处理
if(isset($_POST['username'])&&isset($_POST['pwd']))
{$regArr=[];$regArr['username']=$_POST['username'];$regArr['pwd']=$_POST['pwd'];//注意：这里不能用return,即使是文本也不能用return,不然前端收到是空白 echo json_encode($regArr);
}else
{echo 'no';
}
相关文章：
利用formdata自动序列化和xhr上传表单到后端
//FormData对象是XMLHTTPRequest level2新增的类型，它可以自动序列化表单内容，不再需要我们去写序列化表单方法； FormData()即可以直接把整个表单给它，也可以分别使用append(‘字段’,‘值’)方法给FormData()； 现在就…...
视频号小店大地震？还好我看了原文
关注卢松松，会经常给你分享一些我的经验和观点。 我X，如果不是看了原文，我差点也上当了。虽然视频号小店关闭了450个类目，但又重新开放了412个类目啊。 昨天（8月9日），视频号一口气发了10个公…...
Genymotion adb shell
Genymotion 账户是 qq邮箱 参考 Ubuntu 20.04 安装 Android 模拟器 Genymotion https://www.zzzmh.cn/post/553cd96d4e47490a90b3302a76a93c0d Genymotion adb shell adb shell C:\Program Files\Genymobile\Genymotion\tools>adb shell lsusb Bus 001 Device 001: ID …...
探索AI与社交的交汇点：看Facebook如何引领智能化革命
在当今数字化时代，人工智能（AI）正成为各大科技公司变革的重要驱动力。作为全球领先的社交媒体平台，Facebook（现Meta Platforms）正处于这一智能化革命的前沿。通过不断创新和应用AI技术，Facebook…...
JVM 加载阶段 Class对象加载位置是在 堆中还是方法区？
在JVM（Java虚拟机）的类加载过程中，Class对象的加载位置涉及到堆（Heap）和方法区（Method Area）两个关键区域。具体来说，类的加载阶段涉及到将类的.class文件中的二进制数据读入到内存中…...
Android 获取短信验证
Android 获取短信验证 Android 获取短信验证 输入发短信的手机号，点击获取验证码，等接收到验证码后就会自动获取 SmsReceiver.Java import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; impor…...
负载均衡详细概念介绍之（四层和七层实现）
目录 一、负载均衡介绍 1.1什么是负载均衡 编辑 1.2 为什么要用负载均衡 二、负载均衡的类型 2.1 通过一些硬件实现 2.2 四层负载均衡 2.3 七层负载均衡 三、四层和七层的区别 及特点 一、负载均衡介绍 1.1什么是负载均衡 负载均衡:Load Balance，简称LB&a…...
力扣 | 递增子序列 | 动态规划 | 最长递增子序列、最长递增子序列的个数、及其变式
文章目录 一、300. 最长递增子序列二、673. 最长递增子序列的个数三、变式1、646. 最长数对链2、1218. 最长定差子序列3、1027. 最长等差数列4、354. 俄罗斯套娃信封问题5、1964. 找出到每个位置为止最长的有效障碍赛跑路线 最长递增子序列：原序-递增数值问题 最长定…...
008 | 基于RNN和LSTM的贵州茅台股票开盘价预测
基于RNN和LSTM的贵州茅台股票开盘价预测 项目简介： 本项目旨在通过使用Tushare下载贵州茅台的股票数据，并基于这些历史数据，使用TensorFlow 2.0实现循环神经网络（RNN）和长短期记忆网络（LSTM）来…...
尚硅谷谷粒商城项目笔记——六、使用navciat连接docker中的mysql容器【电脑CPU：AMD】
六、使用navciat连接docker中的mysql容器 注意： 因为电脑是AMD芯片，自己知识储备不够，无法保证和课程中用到的环境一样，所以环境都是自己根据适应硬件软件环境重新配置的，这里的虚拟机使用的是VMware。 1navicat免费…...
【git】本地更改了，但又想直接从远端拉取覆盖本地（放弃本地更改前行下载）
拉取时错误信息 error: cannot pull with rebase: You have unstaged changes. error: Please commit or stash them.个错误信息表明你在尝试使用git pull --rebase命令时，你的工作目录中存在未提交的更改（即未暂存（unstaged）的更…...
基于JSP的书店仓库管理系统
你好呀，我是计算机学姐码农小野！如果有相关需求，可以私信联系我。 开发语言：JSP 数据库：MySQL 技术：JSPJava 工具：ECLIPSE、Tomcat 系统展示 首页 管理员功能模块 用户功能模块 员工功能模…...
pytorch框架保存和加载模型
在 PyTorch 中，有几种常见的方法来保存和加载模型，具体方法取决于你想保存什么内容（例如，只保存模型的权重，还是保存整个模型）。下面我将介绍几种常见的保存和加载模型的方法。 1、保存和加载模型的 state…...
开发输出防护栏以检测GPT-4o幻觉
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
代码复现，代码改进，算法复现，模型复现
目前空闲可接硕士，博士，代码复现，改进代码，文献复现，算法复现，模型复现，文章复现，科研复现，可定制创新点，对比，模块，创新思路…...
基于STM32开发的智能机器人系统
目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 初始化代码控制代码应用场景 自动导航机器人家用服务机器人常见问题及解决方案 常见问题解决方案结论 1. 引言 智能机器人通过整合传感器、控制器和执行机构，能够自主完成环境感…...
【数据结构题目】循环队列，以及队列实现栈的模拟
前言： 🌟🌟Hello家人们，这期讲解数据结构队列的基础知识，希望你能帮到屏幕前的你。 📚️上期博客在这里：http://t.csdnimg.cn/oOkvk 📚️感兴趣的小伙伴看一看小编主页：G…...
大数据CloudSim应用实践：基于CloudSimExamle6.java修改（超详细教程）
文章目录 大数据CloudSim应用实践：基于CloudSimExamle6.java修改（超详细教程）1 准备1.1 操作系统1.2 软件 2 安装JDK2.1 安装JDK 3 配置Eclipse集成开发环境3.1 启动Eclipse3.2 配置Java运行时环境JRE 4 创建Java项目4.1 创建项目4.2 导入jar…...
完美解决浏览器的输入框自动填入时，黄色背景问题，以及图标被遮住问题（最新）
用图说话↓↓↓ 首先用代码解决黄色背景问题，box-shadow颜色设置透明即可，延时渲染时间可修改为更久 :deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #f…...
C 语言中的头文件
1、C 语言中 include <> 与include “” 的区别? #include < > 引用的是编译器的类库路径里面的头文件。 #include " " 引用的是你程序目录的相对路径中的头文件，如果在程序目录没有找到引用的头文件则到编译器的类库路径的目录下找该头文…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...