第十三章认识Ajax(四)

认识FormData对象

FormData对象用于创建一个表示HTML表单数据的键值对集合。

它可以用于发送AJAX请求或通过XMLHttpRequest发送表单数据。

以下是FormData对象的一些作用：

  1. 收集表单数据：通过将FormData对象与表单元素关联，可以方便地收集表单中的数据。使用FormData对象，可以获取表单中的键值对，包括输入框、选择框、单选框、复选框等元素的值。

  2. 发送表单数据：使用FormData对象，可以将表单数据通过AJAX请求或XMLHttpRequest发送到服务器。FormData对象提供了一些方法，可以设置请求头部、添加/删除键值对、追加数据等。

  3. 支持文件上传：FormData对象支持文件上传功能。可以通过使用FormData对象的append()方法，将文件对象添加到表单数据中，然后发送到服务器。这使得文件上传变得非常简单。

总之，FormData对象提供了一种简便的方式来处理和发送表单数据，包括键值对和文件上传。它是进行AJAX表单提交的一种常用方式。

FormData对象实例方法

在使用FormData对象之前，首先需要用new关键字通过实例化FormData()构造函数来创建FromData对象，代码如下：

var formData = new FormData(form);

这段代码的功能是将指定表单中的所有输入字段和值转化为 FormData 对象，并将这个对象存储在 formData 变量中以供进一步使用

代码解释

  1. var formData：创建一个名为 formData 的变量，用于存储 FormData 对象的实例。
  2. new FormData(form)：通过 FormData 构造函数创建一个新的 FormData 对象，并将表单元素 form 作为参数传递给构造函数。这会将表单中的所有字段和值存储到 FormData 对象中。
  3. form：这是一个表单元素的引用，表示要收集数据的表单。这可以是一个通过 document.getElementById() 或其他方法获取的表单元素。
  4. =：将右侧的表达式的值（FormData 对象）赋给左侧的变量 formData。

FormData实例对象提供了四种方法，具体如下：

set()方法用于设置FormData对象属性的值

set('key','value');

get()方法用于获取FormData对象属性的值

get('key');

append()方法用于添加FormData对象属性的值

append('key','value');

delete()方法用于删除FormData对象属性的值

delete('key');

FormData对象实例方法的使用

知道了实例化对象方法的使用，就用简单的案例来了解

第一：在D：code/chapter06/server目录下，新建public目录,在此目录下新建demo01.html文件，编写代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实例化对象</title>
</head><body><!--创建普通的form表单--><form id="form" style="width: 245px;">用户名:<input type="text" name="username" style="float: right;" /><br><br>密码:<input type="password" name="password" style="float: right;" /><br><br><input type="button" id="btn" value="提交" /></form><script>//获取按钮var btn = document.getElementById('btn');//获取表单var form = document.getElementById('form')//为按钮添加单击事件btn.onclick = function () {//将普通的form对象表单转化为FormData对象var formData = new FormData(form);console.log(formData.get('username'));//如果设置的表单属性存在，将会覆盖属性原有值formData.set('username', '李四');console.log(formData.get('password'));formData.append('username', '王五');console.log(formData.get('username'));//如果设置表单属性不存在，将会创建表单属性formData.set('age', 100);console.log(formData.get('age'));//删除用户输入密码formData.delete('password');console.log(formData.get('password'));//创建空的表单对象var f = new FormData();f.append('sex', '男');console.log(f.get('sex'));};</script>
</body></html>

第二：在server目录下安装Express框架，并新建app.js文件，代码如下：

//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
//监听端口
app.listen(3000);
//打印信息
console.log('服务器启动成功！');

第三：在浏览器中查看”localhost:3000/demo01.html“，输入用户名和密码，然后单击即可

formidable表单解析对象的基本使用

流程：

在发起Ajax请求时，FormData对象可以作为POST请求参数直接传递给服务器端，服务器端使用formidable表单解析对象的parse()方法处理FormData对象，并将FormData对象数据的处理结果返回给客户端。

作用：

Formidable是一个用于解析表单数据的Node.js模块。它提供了一个易于使用的API，可以解析表单数据，并将其转换为JavaScript对象。

使用Formidable，可以轻松地处理文件上传、解析URL编码的表单数据，以及处理多部分表单数据

注意：

FormData对象需要被传递到send()方法中，而GET请求方式的请求参数只能放在请求地址中的”？“

连接符号的后面，所以FormData对象不能用于GET请求方式。

案例：

第一：在D:code/chapter04/server目录下，下载和安装formidable模块，执行命令如下

npm install formidable  --save
//formidable是要安装的模块，save表示运行时依赖

第二：在server目录下打开app.js文件，在文件头引入formidable模块和编写定义代码，代码如下

//引用formidable模块
const formidable = require('formidable');
const form = new formidable.IncomingForm();
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
//定义路由
app.post('./formData', (req, res) => {//创建对象const form = new formidable.IncomingForm();//解析对象form.parse(req, (err, fields, files) => {      res.send(fields);  });
});
//监听端口
app.listen(3000, () => {console.log('服务器启动成功！');
});

第三：然后在demo02.html文件中修改<script>中的部分代码

（注意：这个简单的案例跟上面案例的代码一样，只不过修改一部分）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实例化对象</title>
</head><body><!--创建普通的form表单--><form id="form" style="width: 245px;">用户名:<input type="text" name="username" style="float: right;" /><br><br>密码:<input type="password" name="password" style="float: right;" /><br><br><input type="button" id="btn" value="提交" /></form><script>//获取按钮var btn = document.getElementById('btn');//获取表单var form = document.getElementById('form')//为按钮添加单击事件btn.onclick = function () {//将普通的form对象表单转化为FormData对象var formData = new FormData(form);console.log(formData.get('username'));//创建xhr对象var xhr = new XMLHttpRequest();//对xhr对象进行配置xhr.open('post','http:localhost:3000/formData');//发送Ajax请求xhr.send(formData);//监听xhr对象下面的onload事件xhr.onload = function () {if (xhr.status == 200) {console.log(xhr.responseText);};};};</script>
</body></html>

第四：在浏览器中输入访问本地地址即可

上传二进制文件的基本使用

二进制文件主要包括图片、视频和音频等文件，使用formidable表单解析对象来实现二进制文件上传的功能。

form表单解析对象是通过new实例化formidable.IncomingForm()构造函数创建了，该对象包含keepExtensions属性和uploadDir属性。

提示：IncomingForm对象有一些常用的属性和方法，其中包括：

  1. keepExtensions：一个布尔值，用于指定是否保留上传文件的扩展名。默认值为false，即不保留扩展名。
  2. uploadDir：一个字符串，表示上传文件的存储目录。默认情况下，文件将保存在操作系统的临时目录中。
  3. parse(request, callback)：一个方法，用于解析表单请求。request参数是一个http.IncomingMessage对象，包含了客户端提交的表单数据。callback是一个回调函数，用于处理解析后的表单字段和文件。
  4. on(eventName, callback)：一个方法，用于注册事件处理程序。常用的事件有fileBegin（在开始处理一个文件上传时触发）、progress（在文件上传过程中触发）、end（在所有文件上传完成后触发）等。
  5. 其他一些属性和方法，如setMaxFieldsSize（设置表单字段的最大大小）、setMaxFileSize（设置上传文件的最大大小）等。

keepExtensions属性  用于确定在上传过程中是否保留上传文件的文件扩展名。如果keepExtensions设置为true，则上传的文件将保留其原始的扩展名。如果设置为false，则文件扩展名将被删除。示例代码如下：

form.keepExtensions = true;

uploadDir属性  用于指定上传文件存储的目录。该属性用于确定保存上传文件的目标文件夹。示例代码如下：

 form.uploadDir = '/my/dir';

简单案例:

在D：code/chapter04/server/public目录下，新建demo03.html文件，编写代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wenjain</title>
</head><body><label>请选择文件</label><input type="file" id="file" /><div id="box"></div><script>//获取文件选择控件var file = document.getElementById('file');//获取图片容器var box = document.getElementById('box');//为文件选择控件添加onchange事件,选择文件时触发file.onchange = function () {//创建空的表单对象var formData = new FormData();//将用户选择的文件追加到formData表单对象中formData.append('attrName', this.files[0]);//创建xhr对象var xhr = new XMLHttpRequest();//配置对象xhr.open('post', 'http://localhost:3000/upload');//发送Ajax请求//监听服务器端响应给客户端的数据xhr.onload = function () {//展示图片//判断状态码if (xhr.status == 200) {//转换为JSON对象var result = JSON.parse(xhr.responseText);//动态创建img元素对象var img = document.createElement('img');//为图片标签设置src属性img.src = result.path;//当图片加载完后img.onload = function () {//将图片显示在页面box.appendChild(img);};};};};</script>
</body></html>

在server目录下新建upload.js文件，编写代码如下：

//引入express框架
const express = require('express');
const formidable = require('formidable');
const path = require('path')
//创建服务器
const app = express();
//静态资源服务访问
app.use(express.static(path.join(__dirname, 'public')));
app.post('./uploads', (req, res) => {const form = new formidable.IncomingForm();//设置客户端上转文件路径form.uploadDir = path.join(__dirname, 'public', 'uploads');//保留上传文件扩展名form.keepExtensions = true;//解析客户端传递过来formData对象form.parse(req, (err, fields, files) => {//将客户端传传递过来的文件地址响应到客户端res.send({path: files.atteName.path.split('public')[1]});});
});
app.listen(3000);
console.log('服务器启动成功！');

输出结果

（我发现图片没有存储在uploads文件下，uploads文件需要手动创建，并且图片无法显示在浏览器中，各位网友能帮忙一下哦）

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

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

相关文章

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现 —— 杭州 2024-01-28 code review! 文章目录 C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现1.RTTI、RAII、MVC、MVVM、SOLID简述2.RAII (Resource Acquisition Is Initialization)3.RTTI (Run-Time Type Informat…
阅读更多...
js中将回调地狱改装成promise方式的函数

js中将回调地狱改装成promise方式的函数

概述&#xff1a; 回调地狱&#xff08;Callback Hell&#xff09;是指在异步编程中&#xff0c;多层嵌套的回调函数导致代码难以理解、维护和扩展的情况。 代码展示&#xff1a; ajax({url: 我是第一个请求,success (res) {// 现在发送第二个请求ajax({url: 我是第二个请求…
阅读更多...
多线程面试合集

多线程面试合集

前言 前文介绍了JVM相关知识&#xff0c;本文将重点介绍多线程相关知识以及工作中的一些经验。 多线程面试合集 什么是多线程&#xff1f;为什么我们需要多线程&#xff1f; 多线程是指在一个进程中同时执行多个线程&#xff0c;每个线程可以执行不同的任务。多线程可以提高…
阅读更多...
什么是“原子类“ 和 CAS “无锁化编程“？如何解决 CAS 编程中的 ABA 问题？

什么是“原子类“ 和 CAS “无锁化编程“？如何解决 CAS 编程中的 ABA 问题？

目录 一、什么是"原子类"&#xff1f; 二、什么是 CAS &#xff1f; 三、CAS 的 ABA 问题是什么&#xff1f; 四、如何解决 ABA 问题&#xff1f; 一、什么是"原子类"&#xff1f; "原子类"是 Java 标准库提供的 CAS 工具类。存放于 java.ut…
阅读更多...
Springboot响应数据详解

Springboot响应数据详解

功能接口 Controller下每一个暴露在外的方法都是一个功能接口 功能接口的请求路径是RequestMapping定义的路径&#xff0c;浏览器需要请求该功能则需要发出该路径下的请求。 RestController RestControllerControllerResponseBody(响应数据的注解) ResponseBody 类型&#…
阅读更多...
【数据分析】numpy基础第二天

【数据分析】numpy基础第二天

文章目录 前言数组的形状变换reshape的基本介绍使用reshapereshape([10, 1])运行结果reshape自动判断形状reshape([-1, 1])运行结果 合并数组使用vstack和hstackvstack和hstack的运行结果使用concatenateconcatenate运行结果 分割数组array_split运行结果 数组的条件筛选条件筛…
阅读更多...
Matlab|【完全复现】基于价值认同的需求侧电能共享分布式交易策略

Matlab|【完全复现】基于价值认同的需求侧电能共享分布式交易策略

目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序完全复现《基于价值认同的需求侧电能共享分布式交易策略》&#xff0c;针对电能共享市场的交易机制进行研究&#xff0c;提出了基于价值认同的需求侧电能共享分布式交易策略&#xff0c;旨在降低电力市…
阅读更多...
腾讯云幻兽帕鲁服务器创建教程，附4核16G服务器价格表

腾讯云幻兽帕鲁服务器创建教程，附4核16G服务器价格表

腾讯云0基础搭建帕鲁服务器4C16G14M服务器稳定无卡顿&#xff0c;先下载SteamCMD&#xff0c;并运行&#xff1b;然后下载Palserver&#xff0c;修改服务ini配置&#xff0c;启动PalServer&#xff0c;进入游戏服务器。腾讯云百科txybk.com分享腾讯云创建幻兽帕鲁服务器教程&am…
阅读更多...
写点东西《JWT 与会话身份验证》

写点东西《JWT 与会话身份验证》

写点东西《JWT 与会话身份验证》 身份验证与授权 JWT 与session身份验证 - 基本差异 什么是 JWT&#xff1f; JWT 结构&#xff1a; JWT 工作流程&#xff1a;优势: 安全问题&#xff1a; 处理令牌过期&#xff1a; 基于session的身份验证&#xff08;通常称为基于 cookie 的身…
阅读更多...
深度强化学习（王树森）笔记07

深度强化学习（王树森）笔记07

深度强化学习&#xff08;DRL&#xff09; 本文是学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。本文在ChatGPT辅助下完成。 参考链接 Deep Reinforcement Learning官方链接&#xff1a;https://github.com/wangshusen/DRL 源代码链接&#xff1a;https://github.c…
阅读更多...
java语言深度讨论

java语言深度讨论

try-with-resource写法对构造器抛异常的处理 如果我们在类的构造器里抛出异常&#xff0c;try-with-resource写法是没法自动调close的。逻辑上很好理解&#xff0c;你对象都没成功创建&#xff0c;我为啥要调close啊。 从反编译的代码里也可以看出端倪&#xff1a; MyParser p…
阅读更多...
Qt|大小端数据转换

Qt|大小端数据转换

后面打算写Qt关于网络编程的博客&#xff0c;网络编程就绕不开字节流数据传输&#xff0c;字节流数据的传输一般是根据协议来定义对应的报文该如何组包&#xff0c;那这就必然牵扯到了大端字节序和小端字节序的问题了。不清楚的大小端的可以看一下相关资料&#xff1a;大小端模…
阅读更多...
类和对象：为什么C++推荐使用多态

类和对象：为什么C++推荐使用多态

优势&#xff1a; 在开发中追求开放扩展&#xff0c;封闭修改&#xff0c;多态的使用使得源程序可以更方便的进行扩展而不需要修改源代码。同时多态也使代码的可读性更强。 案例1&#xff1a;利用多态实现计算器类 class AbstractClaculator { public:virtual int getResult…
阅读更多...
harr小波变换及其逆运算的推导及演示

harr小波变换及其逆运算的推导及演示

哈尔小波（Haar wavelet）是最早提出的小波变换之一，它的变换和逆变换运算比较简单。对于一维信号（向量）的哈尔小波变换，可以分为两个步骤：分解步骤和重建（逆变换）步骤。 正向变换： 对于给定的四元组 (a, b, c, d)，两次哈尔小波变换的过程如下： 第一次变换： 计算两…
阅读更多...
c++线程thread示例

c++线程thread示例

本文章记录c创建线程&#xff0c;启动线程和结束线程的代码。 需要注意&#xff0c;编译时需要添加-lpthread依赖。 代码&#xff1a; ThreadTest.h #ifndef TEST_THREAD_TEST_H #define TEST_THREAD_TEST_H#include <thread> #include <mutex>class ThreadTes…
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集11

【华为 ICT HCIA eNSP 习题汇总】——题目集11

1、某公司的内网用户采用 NAT 技术的 NO-pat 方式访问互联网&#xff0c;若所有的公网地址均被使用&#xff0c;则后续上网的内网用户会&#xff08;&#xff09;。 A、挤掉前一个用户&#xff0c;强制进行 NAT 转换上网 B、将报文同步到其他 NAT 转换设备上进行 NAT 转换 C、自…
阅读更多...
springboot集成 Redis快速入门demo

springboot集成 Redis快速入门demo

一、准备redis环境 这里用docker-compose来搭建Redis测试环境&#xff0c;采用单机模式&#xff0c;具体配置如下&#xff1a; docker-compose-redis.yml version: 3 services:redis:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/redis:6.0.8 # ima…
阅读更多...
kafka详细解释

kafka详细解释

什么是kafka Kafka是一个开源的分布式流处理平台&#xff0c;最早由LinkedIn开发&#xff0c;并于2011年成为Apache软件基金会的顶级项目。Kafka使用高效、可扩展和持久化的方式处理流式数据&#xff0c;可以存储和处理大规模的实时数据流。Kafka的核心概念包括消息生产者、消息…
阅读更多...
编程笔记 html5cssjs 064 JavaScrip语言规则

编程笔记 html5cssjs 064 JavaScrip语言规则

编程笔记 html5&css&js 064 JavaScrip语言规则 JavaScript 有哪些基本的语言规则&#xff1f; 接下来正式接触编程语言了&#xff0c;每一门语言都有一些基本的语言规则&#xff0c;这些规则有些在没有具体使用之前可能不好理解&#xff0c;初学者简单了解就可以了&…
阅读更多...
牛客周赛30

牛客周赛30

思路&#xff1a;先把x, y除以最大公约数变成最小值&#xff0c;然后同时乘以倍数cnt&#xff0c;只记录两个数都在[l,r]间的倍数。 代码&#xff1a; int gcd(int a,int b){return b ? gcd(b, a % b) : a; }void solve(){int x, y, l, r;cin >> x >> y >>…
阅读更多...
最新文章

Copyright @ 2022~2023