JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据

最近写大创项目的时候，要做登录功能，考虑到之后还需要上传头像图片，因此决定使用FormData发送表单请求。项目中用的是JQ封装的ajax，配合FormData使用的时候出现了一些问题。

首先这里就不再说明FormData的作用和用法，如果不清楚的可以看看这篇文章：FormData对象的使用。

1. 可能出现的问题

JQ中初始化FormData对象

在JQ中，如果想使用一个已经存在的表单初始化FormData对象，在选中这个表单DOM的时候，不能使用JQ自带的 $('form') 方法，而是应该使用JS原生写法：
```
//错误的写法：
let formData = new FormData($('form'));
//正确的写法：
let formData = new FormData(document.querySelector('form'));
```
如果使用JQ的选择器写法，那么会报错，大致意思应该是FormData初始化的参数不正确。使用JS原生写法就没问题了。
配合ajax无法发送请求

如果在JQ封装的ajax中发送FormData数据，发生报错：TypeError: 'append' called on an object that does not implement interface FormData 。加入这两行：
```
processData: false,
contentType: false
```

2. 完整的发送请求代码

    //使用Formdata提交登录信息//初始化表单let formData = new FormData(document.querySelector('form'));//有需要的话可以修改formdata数据//formdata.set('identiy', identiy);//发送ajax请求$.ajax({url: './login',type: 'post',data: formData,processData: false,  //不处理数据contentType: false,  //不设置内容类型success: function (data) {console.log(data)},error: (err) => {console.log(err)}})

3. 服务器端使用express接收处理FormData数据

需要安装 express-formidable 模块：

npm i express-formidable

使用：

const express = require('express');
const app = express();//引入模块
const formidable = require('express-formidable');
//挂载
app.use(formidable());//接收请求
router.post('/formdata',(req,res,next)=>{console.log(req.fields);  // formData中的参数console.log(req.files);  // formData中的文件
})

JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据相关推荐

JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
React ajax 发送请求（六）
React ajax 发送请求(六) React 官网链接: 英文官网中文官网接着上节 React 代理配置(五) 前言在实际做React 项目的时候, 前端应用需要通过 ajax 请求与后台进 ...
jQuery里如何使用ajax发送请求
回到文章总目录本篇文章介绍的是在jQuery里如何使用ajax发送请求 jquery里面的单纯的get请求和单纯的post请求比较简洁的,也比较简易 jquery里面ajax通用方法(自定义个化强) ...
前后端分离时ajax发送请求时后端能接送，但是前端的response为空时
困扰了一天的问题,使用ajax向后端发送请求,后端成功接收并且处理,但是返回前端时在前端调用response时发现后端返回的数据为空 . success:function (response) {if ...
js采用ajax发送请求获取数据（实例操作）
来,案例之前,容我分享一下js如何发送请求. 原生js发送请求: let xhr= new XMLHttpRequest(); // methods:GET/POST请求方式等,url:请求地址,tr ...
mitmdump脚本中使用requests模块发送请求
本文仅供学习交流使用,如侵立删! 环境 win10.Windows Server 2008 R2 python3.9 mitmdump4.0 mitmdump脚本中使用requests模块发送请求 m ...
php ci post 请求,CI框架中判断post,ajax,get请求的方法
这篇文章主要介绍了关于CI框架中判断post,ajax,get请求的方法 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 CI框架当中并没有提供,类似tp框架中IS_POST,IS_A ...
Django Ajax发送请求使用方法
首先需要引入Jquery这个库其次: 需要引入csrf_token 原因是因为django 表单认证需要csrf认证最后,就是正常执行ajax发送请求示例代码如下: <script src ...
AJAX，SpringMVC，拦截器（Ajax发送请求经过SpringMVC拦截器重定向其他页面失败）
Ajax发送请求经过SpringMVC拦截器重定向其他页面失败借鉴出处 Ajax是通过异步请求后台,获取数据,局部刷新页面,因此,即使后台进行页面跳转的编码,前台请求完毕以后,只会执行ajax的回 ...

JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据

JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据

1. 可能出现的问题

2. 完整的发送请求代码

3. 服务器端使用express接收处理FormData数据

JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据相关推荐

最新文章

热门文章