当前位置： 首页 > news >正文

利用formdata自动序列化和xhr上传表单到后端

news 2026/4/6 14:25:14

//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">密&emsp;码：<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新增的类型&#xff0c;它可以自动序列化表单内容&#xff0c;不再需要我们去写序列化表单方法&#xff1b; FormData()即可以直接把整个表单给它&#xff0c;也可以分别使用append(‘字段’,‘值’)方法给FormData()&#xff1b; 现在就…...

编程日记 2024/8/12 0:18:34

视频号小店大地震？还好我看了原文

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 我X&#xff0c;如果不是看了原文&#xff0c;我差点也上当了。虽然视频号小店关闭了450个类目&#xff0c;但又重新开放了412个类目啊。 昨天&#xff08;8月9日&#xff09;&#xff0c;视频号一口气发了10个公…...

编程日记 2024/8/12 0:16:32

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 …...

编程日记 2024/8/12 0:15:30

探索AI与社交的交汇点：看Facebook如何引领智能化革命

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;正成为各大科技公司变革的重要驱动力。作为全球领先的社交媒体平台&#xff0c;Facebook&#xff08;现Meta Platforms&#xff09;正处于这一智能化革命的前沿。通过不断创新和应用AI技术&#xff0c;Facebook…...

编程日记 2024/8/12 0:10:27

JVM 加载阶段 Class对象加载位置是在 堆中还是方法区？

在JVM&#xff08;Java虚拟机&#xff09;的类加载过程中&#xff0c;Class对象的加载位置涉及到堆&#xff08;Heap&#xff09;和方法区&#xff08;Method Area&#xff09;两个关键区域。具体来说&#xff0c;类的加载阶段涉及到将类的.class文件中的二进制数据读入到内存中…...

编程日记 2024/8/12 0:06:22

Android 获取短信验证

Android 获取短信验证 Android 获取短信验证 输入发短信的手机号&#xff0c;点击获取验证码&#xff0c;等接收到验证码后就会自动获取 SmsReceiver.Java import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; impor…...

编程日记 2024/8/12 0:05:21

负载均衡详细概念介绍之（四层和七层实现）

目录 一、负载均衡介绍 1.1什么是负载均衡 ​编辑 1.2 为什么要用负载均衡 二、负载均衡的类型 2.1 通过一些硬件实现 2.2 四层负载均衡 2.3 七层负载均衡 三、四层和七层的区别 及特点 一、负载均衡介绍 1.1什么是负载均衡 负载均衡:Load Balance&#xff0c;简称LB&a…...

编程日记 2024/8/12 0:04:20

力扣 | 递增子序列 | 动态规划 | 最长递增子序列、最长递增子序列的个数、及其变式

文章目录 一、300. 最长递增子序列二、673. 最长递增子序列的个数三、变式1、646. 最长数对链2、1218. 最长定差子序列3、1027. 最长等差数列4、354. 俄罗斯套娃信封问题5、1964. 找出到每个位置为止最长的有效障碍赛跑路线 最长递增子序列&#xff1a;原序-递增数值问题 最长定…...

编程日记 2024/8/12 0:03:18

008 | 基于RNN和LSTM的贵州茅台股票开盘价预测

基于RNN和LSTM的贵州茅台股票开盘价预测 项目简介&#xff1a; 本项目旨在通过使用Tushare下载贵州茅台的股票数据&#xff0c;并基于这些历史数据&#xff0c;使用TensorFlow 2.0实现循环神经网络&#xff08;RNN&#xff09;和长短期记忆网络&#xff08;LSTM&#xff09;来…...

编程日记 2024/8/12 0:02:17

尚硅谷谷粒商城项目笔记——六、使用navciat连接docker中的mysql容器【电脑CPU：AMD】

六、使用navciat连接docker中的mysql容器 注意&#xff1a; 因为电脑是AMD芯片&#xff0c;自己知识储备不够&#xff0c;无法保证和课程中用到的环境一样&#xff0c;所以环境都是自己根据适应硬件软件环境重新配置的&#xff0c;这里的虚拟机使用的是VMware。 1navicat免费…...

编程日记 2024/8/12 0:01:16

【git】本地更改了，但又想直接从远端拉取覆盖本地（放弃本地更改前行下载）

拉取时错误信息 error: cannot pull with rebase: You have unstaged changes. error: Please commit or stash them.个错误信息表明你在尝试使用git pull --rebase命令时&#xff0c;你的工作目录中存在未提交的更改&#xff08;即未暂存&#xff08;unstaged&#xff09;的更…...

编程日记 2024/8/12 0:00:16

基于JSP的书店仓库管理系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;JSP 数据库&#xff1a;MySQL 技术&#xff1a;JSPJava 工具&#xff1a;ECLIPSE、Tomcat 系统展示 首页 管理员功能模块 用户功能模块 员工功能模…...

编程日记 2024/8/11 23:58:14

pytorch框架保存和加载模型

在 PyTorch 中&#xff0c;有几种常见的方法来保存和加载模型&#xff0c;具体方法取决于你想保存什么内容&#xff08;例如&#xff0c;只保存模型的权重&#xff0c;还是保存整个模型&#xff09;。下面我将介绍几种常见的保存和加载模型的方法。 1、保存和加载模型的 state…...

编程日记 2024/8/11 23:53:08

开发输出防护栏以检测GPT-4o幻觉

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/8/11 23:52:07

代码复现，代码改进，算法复现，模型复现

目前空闲可接硕士&#xff0c;博士&#xff0c;代码复现&#xff0c;改进代码&#xff0c;文献复现&#xff0c;算法复现&#xff0c;模型复现&#xff0c;文章复现&#xff0c;科研复现&#xff0c;可定制创新点&#xff0c;对比&#xff0c;模块&#xff0c;创新思路&#xf…...

编程日记 2024/8/11 23:50:05

基于STM32开发的智能机器人系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 初始化代码控制代码应用场景 自动导航机器人家用服务机器人常见问题及解决方案 常见问题解决方案结论 1. 引言 智能机器人通过整合传感器、控制器和执行机构&#xff0c;能够自主完成环境感…...

编程日记 2024/8/11 23:48:03

【数据结构题目】循环队列，以及队列实现栈的模拟

前言&#xff1a; &#x1f31f;&#x1f31f;Hello家人们&#xff0c;这期讲解数据结构队列的基础知识&#xff0c;希望你能帮到屏幕前的你。 &#x1f4da;️上期博客在这里&#xff1a;http://t.csdnimg.cn/oOkvk &#x1f4da;️感兴趣的小伙伴看一看小编主页&#xff1a;G…...

编程日记 2024/8/11 23:42:57

大数据CloudSim应用实践：基于CloudSimExamle6.java修改（超详细教程）

文章目录 大数据CloudSim应用实践&#xff1a;基于CloudSimExamle6.java修改&#xff08;超详细教程&#xff09;1 准备1.1 操作系统1.2 软件 2 安装JDK2.1 安装JDK 3 配置Eclipse集成开发环境3.1 启动Eclipse3.2 配置Java运行时环境JRE 4 创建Java项目4.1 创建项目4.2 导入jar…...

编程日记 2024/8/11 23:41:56

完美解决浏览器的输入框自动填入时，黄色背景问题，以及图标被遮住问题（最新）

用图说话↓↓↓ 首先用代码解决黄色背景问题&#xff0c;box-shadow颜色设置透明即可&#xff0c;延时渲染时间可修改为更久 :deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #f…...

编程日记 2024/8/11 23:40:55

C 语言中的头文件

1、C 语言中 include <> 与include “” 的区别? #include < > 引用的是编译器的类库路径里面的头文件。 #include " " 引用的是你程序目录的相对路径中的头文件&#xff0c;如果在程序目录没有找到引用的头文件则到编译器的类库路径的目录下找该头文…...

编程日记 2024/8/11 23:39:53

EasyControl 技术指南：从环境搭建到核心功能配置

EasyControl 技术指南&#xff1a;从环境搭建到核心功能配置 【免费下载链接】Easycontrol 易控&#xff0c;帮助你方便的使用手机远程控制手机。 项目地址: https://gitcode.com/gh_mirrors/ea/Easycontrol 核心价值&#xff1a;重新定义移动设备控制体验 作为开发者&…...

编程新知 2026/4/6 13:51:34

PROJECT MOGFACE创意写作工坊：辅助小说大纲与角色设定生成

PROJECT MOGFACE创意写作工坊&#xff1a;辅助小说大纲与角色设定生成 你有没有过这样的时刻&#xff1f;脑子里闪过一个绝妙的点子&#xff0c;比如“一个AI在觉醒后&#xff0c;带着它的创造者亡命天涯”&#xff0c;但当你打开文档&#xff0c;准备大干一场时&#xff0c;却…...

编程新知 2026/4/6 13:29:03

别再死记硬背LFSR了！用Verilog手搓一个伽罗瓦型伪随机数发生器（附完整代码与仿真）

从零构建伽罗瓦LFSR&#xff1a;Verilog实战指南与工程避坑手册 在数字通信系统的测试环节中&#xff0c;工程师常常需要生成特定的数据序列来模拟真实场景。我曾在一个无线模块开发项目中&#xff0c;为了测试接收机的抗干扰能力&#xff0c;需要快速生成符合特定统计特性的伪…...

编程新知 2026/4/6 13:18:53

企业网站关键词 SEO 优化大概需要多少费用

企业网站关键词 SEO 优化大概需要多少费用 在当今数字化经济时代&#xff0c;企业网站的SEO优化已经成为了提升网站流量和品牌知名度的重要手段。企业网站关键词 SEO 优化大概需要多少费用呢&#xff1f;这个问题的答案并不简单&#xff0c;因为涉及到多方面的因素。本文将详细…...

编程新知 2026/4/6 11:51:22

12年不上班，我靠什么支撑到现在

我已经12年没去上过班了&#xff0c;14年从学校辞职出来后&#xff0c;就没再给人打过工。虽然我不上班&#xff0c;但身边人都觉得我很会赚钱&#xff0c;觉得我很幸运&#xff0c;也觉得我很有勇气。 其实&#xff0c;并不是我多勇敢&#xff0c;是因为早在2014年&#xff0c…...

编程新知 2026/4/6 10:28:37

Pixel Language Portal效果展示：实时翻译+st.balloons()庆祝动画+HP状态变化的沉浸式交互录屏

Pixel Language Portal效果展示&#xff1a;实时翻译st.balloons()庆祝动画HP状态变化的沉浸式交互录屏 1. 像素冒险工坊的诞生 在传统翻译工具千篇一律的界面中&#xff0c;Pixel Language Portal&#xff08;像素语言跨维传送门&#xff09;带来了全新的视觉冲击。这款基于…...

编程新知 2026/4/6 10:06:21

【技术拆解】DCVC-RT：如何用五大创新让神经视频编码跑进实时时代？

1. 神经视频编码的实时化挑战 视频压缩技术发展到今天&#xff0c;已经进入了一个关键的转折点。传统视频编码标准如H.264、H.265已经接近理论极限&#xff0c;而基于神经网络的视频压缩方法虽然展现出更好的压缩效率&#xff0c;却一直受限于计算速度。这就好比一个天才厨师&a…...

编程新知 2026/4/6 9:52:02

技术解析：ncmdump如何破解网易云音乐NCM格式加密机制

技术解析&#xff1a;ncmdump如何破解网易云音乐NCM格式加密机制 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 在数字音乐版权保护日益严格的今天&#xff0c;网易云音乐采用NCM格式对下载的音乐文件进行加密保护&#xff0c;这种…...

编程新知 2026/4/6 9:52:02

基于Simulink的无刷电机调速系统仿真

目 录 第一章 绪论 1 1.1 研究背景及研究意义 1 1.2 无刷直流电机调速系统的国内外研究现状 2 1.3 本文的主要研究内容及章节安排 3 第二章 无刷直流电机的基本原理 4 2.1 无刷直流电机的基本结构 4 2.1.1 电机本体 4 1.电动机定子 4 2. 电动机转子 5 2.1.2 位置传感器 5 2.…...

编程新知 2026/4/6 9:48:02

避坑指南：uniapp小程序自定义tabbar闪屏问题终极解决方案（含page.json配置）

避坑指南&#xff1a;uniapp小程序自定义tabbar闪屏问题终极解决方案&#xff08;含page.json配置&#xff09; 第一次在uniapp里尝试自定义tabbar时&#xff0c;那个刺眼的闪屏效果简直让人崩溃——页面切换时像老式电视机换台一样闪烁&#xff0c;用户体验直接跌到谷底。这问…...

编程新知 2026/4/6 9:29:42