第十三章认识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.mfbz.cn/a/355114.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DjangoURL调度器（二）

DjangoURL调度器（二）

一、默认值与额外参数 1.1、默认值 1.1.1、urls.py from django.urls import pathfrom . import viewsurlpatterns [# http://127.0.0.1:8000/polls/blog/ 等同于 # http://127.0.0.1:8000/polls/blog/1/path(blog/, views.page),# http://127.0.0.1:8000/polls/blo…
阅读更多...
解读BEVFormer，新一代自动驾驶视觉工作的基石

解读BEVFormer，新一代自动驾驶视觉工作的基石

文章出处 BEVFormer这篇文章很有划时代的意义&#xff0c;改变了许多视觉领域工作的pipeline[2203.17270] BEVFormer: Learning Birds-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers (arxiv.org)https://arxiv.org/abs/2203.17270 BEV …
阅读更多...
架构篇19：单服务器高性能模式-Reactor与Proactor

架构篇19：单服务器高性能模式-Reactor与Proactor

文章目录 ReactorProactor小结上篇介绍了单服务器高性能的 PPC 和 TPC 模式，它们的优点是实现简单，缺点是都无法支撑高并发的场景，尤其是互联网发展到现在，各种海量用户业务的出现，PPC 和 TPC 完全无能为力。今天我将介绍可以应对高并发场景的单服务器高性能架构模式：Rea…
阅读更多...
第18章_JDK8-17新特性（下）(新语法结构,API的变化,其它结构变化,小结与展望)

第18章_JDK8-17新特性（下）(新语法结构,API的变化,其它结构变化,小结与展望)

文章目录 第18章_JDK8-17新特性&#xff08;下&#xff09;6. 新语法结构6.1 Java的REPL工具&#xff1a; jShell命令6.2 异常处理之try-catch资源关闭6.3 局部变量类型推断6.4 instanceof的模式匹配6.5 switch表达式6.6 文本块6.7 Record6.8 密封类 7. API的变化7.1 Optional类…
阅读更多...
MarkDown快速入门-以Obsidian编辑器为例

MarkDown快速入门-以Obsidian编辑器为例

直接上图&#xff0c;左右对应。 首先是基础语法。 # 标题&#xff0c;几个就代表几级标题&#xff1b;* 单个是序号&#xff0c;两个在一起就是斜体&#xff1b;- [ ] 代表任务&#xff0c;注意其中的空格&#xff1b; 然后是表格按钮代码 | 使用中竖线代表表格&#xff0c…
阅读更多...
SparkSql---用户自定义函数UDFUDAF

SparkSql---用户自定义函数UDFUDAF

文章目录 1.UDF2.UDAF2.1 UDF函数实现原理2.2需求:计算用户平均年龄2.2.1 使用RDD实现2.2.2 使用UDAF弱类型实现2.2.3 使用UDAF强类型实现 1.UDF 用户可以通过 spark.udf 功能添加自定义函数&#xff0c;实现自定义功能。 如&#xff1a;实现需求在用户name前加上"Name:…
阅读更多...
【QT+QGIS跨平台编译】之十四：【webp+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

【QT+QGIS跨平台编译】之十四：【webp+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

文章目录 一、webp介绍二、webp下载三、文件分析四、pro文件五、编译实践一、webp介绍 WebP 是一种现代的图像格式，由 Google 开发。它能够提供更好的压缩率和图像质量，相比于传统的 JPEG 和 PNG 格式。WebP 图像通常具有更小的文件大小，同时保持高质量的图像细节，这使得它…
阅读更多...
总结6（循环（for））

总结6（循环（for））

循环 定义&#xff1a; 某些代码会被重复执行 分类&#xff1a; for 1.格式 for(1; 2; 3) 语句A; 2.执行的流程&#xff08;1,2,A,3 2,A,3 2,A,3..........&#xff09; 单个for循环的使用 多个for循环的嵌套使用 1). for&#xff08;1; 2; 3&#xff09; for&#xff0…
阅读更多...
【数据分析】numpy基础第二天

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

文章目录 前言数组的形状变换reshape的基本介绍使用reshapereshape([10, 1])运行结果reshape自动判断形状reshape([-1, 1])运行结果 合并数组使用vstack和hstackvstack和hstack的运行结果使用concatenateconcatenate运行结果 分割数组array_split运行结果 数组的条件筛选条件筛…
阅读更多...
qemu单步调试arm64 linux kernel

qemu单步调试arm64 linux kernel

一、背景和目的 qemu搭建arm64 linux kernel环境-CSDN博客 之前介绍了qemu启动kernel的配置步骤和方法&#xff0c;现在开始我们的调试&#xff0c;这篇文章主要讲解如何单步调试内核&#xff0c;所有的实验还是基于ARM64&#xff1b; 二、环境准备 需要准备hostx86 target…
阅读更多...
VirtualBox：安装提示缺少python core和win32 api

VirtualBox：安装提示缺少python core和win32 api

最近升级了Ubuntu22.04&#xff0c;查了一下&#xff0c;VirtualBox的增强功能&#xff0c;居然用时5分钟。 5min 18ms vboxadd.service 据说升级VirtualBox的增强功能能解决这个问题&#xff0c;于是先升级VirtualBox&#xff0c;但是安装VirtualBox却报缺少python core及win3…
阅读更多...
Android App开发-简单控件（4）——按钮触控和图像显示

Android App开发-简单控件（4）——按钮触控和图像显示

3.4　按钮触控 本节介绍了按钮控件的常见用法&#xff0c;包括&#xff1a;如何设置大小写属性与点击属性&#xff0c;如何响应按钮的点击事件和长按事件&#xff0c;如何禁用按钮又该如何启用按钮&#xff0c;等等。 3.4.1　按钮控件Button 除了文本视图之外&#xff0c;按钮…
阅读更多...
【GAMES101】Lecture 11 贝塞尔曲线

【GAMES101】Lecture 11 贝塞尔曲线

曲线这部分基本上就单讲了贝塞尔曲线 目录 贝塞尔曲线&#xff08;Bezier curves&#xff09; De Casteljau’s algorithm B-splines 贝塞尔曲线&#xff08;Bezier curves&#xff09; 很早之前说过的这种矢量图是不会随着放大而失真的&#xff0c;像这种字体&#xff0c…
阅读更多...
Mysql第一天

Mysql第一天

数据库概述 1. 为什么要使用数据库 持久化(persistence)&#xff1a;把数据保存到可掉电式存储设备中以供之后使用。(可掉电:内存 使用高电压和低电压来区别0和1进行数据的一个存储但是一旦断电了电压都没了 0和1也就没有了)大多数情况下&#xff0c;特别是企 业级应用&#…
阅读更多...
CSS 星空按钮

CSS 星空按钮

<template><button class="btn" type="button"><strong>星空按钮</strong><div id="container-stars"><div id="stars"></div></div><div id="glow"><div class=…
阅读更多...
HCIA-HarmonyOS设备开发认证-3.内核基础

HCIA-HarmonyOS设备开发认证-3.内核基础

目录 前言目标一、进程与线程待续。。。 前言 对于任何一个操作系统而言&#xff0c;内核的运行机制与原理是最为关键的部分。本章内容从多角度了解HarmonyOS的内核运行机制&#xff0c;涵盖进程与线程的概念&#xff0c;内存管理机制&#xff0c;网络特性&#xff0c;文件系统…
阅读更多...
vue3 + ts vue_3.4 setup单文件组件中的属性

vue3 + ts vue_3.4 setup单文件组件中的属性

props 各种类型 <script lang"ts" setup>import { ref, PropType } from vue;interface listType {addres: string;code: number;}interface ftObj {obj1: string[];obj2: {[key: string]: any;};}const props defineProps({name: {type: String as PropType&…
阅读更多...
C 练习实例50-使用Dev-C++创建项目（圆形体体积计算器）

C 练习实例50-使用Dev-C++创建项目（圆形体体积计算器）

项目展示 项目案例&#xff1a;圆形体体积计算器 vol.h文件 #include <stdio.h> #include <math.h> #define PI 3.141592654 void cal(int sel); //函数声明 double vol_ball(void); double vol_cylind(void); double vol_cone(void); main.c文件 #include &quo…
阅读更多...
代理IP使用指南：风险与注意事项

代理IP使用指南：风险与注意事项

在当今的数字化时代&#xff0c;使用在线代理IP已经成为一种常见的网络行为。然而&#xff0c;在使用这些代理IP时&#xff0c;我们需要注意一些风险和问题&#xff0c;以确保我们的网络安全和隐本私文。将探讨使用代理IP时需要注意的几个关键问题。 1、代理IP的安全性 使用代理…
阅读更多...
【JavaLearn】#（29）Maven引入、Maven项目类型、Maven安装与配置、Maven项目的创建和使用、pom配置文件介绍

【JavaLearn】#（29）Maven引入、Maven项目类型、Maven安装与配置、Maven项目的创建和使用、pom配置文件介绍

1. Maven引入 1.1 传统方式中项目jar包资源的问题 项目中的jar包资源&#xff08;如JDBC驱动包&#xff09;需要我们自己从网上下载&#xff0c;然后手动导入到项目中使用 –> 一旦jar包资源过多&#xff0c;容易造成遗漏&#xff0c;且不好管理 如果有两个项目&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站