前端问题 ----使用FormData 向服务器提交数据 fd.append("name", "pink")。
再将数据发到客户端。但，数据变成下面这样子，无法解析，不知如何处理。请教
{"------WebKitFormBoundary7YCi2B5OtjTdRBBX\r\nContent-Disposition: form-data; name":"\"name\"\r\n\r\npink\r\n------WebKitFormBoundary7YCi2B5OtjTdRBBX--\r\n"}
html 代码：
<button id="2post">post</button>
javascript代码：
<script>
$('#2post').on('click', function() {
const fd = new FormData()
fd.append("name", "pink")
const xhr = new XMLHttpRequest()
xhr.open('POST', "http://127.0.0.1/api")
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(fd)
xhr.onreadystatechange = function() {
console.log(xhr.responseText)
}
})
</script>
node.js---后端服务器代码
const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
const router = express.Router()
app.use('/api', router)
router.post('/', (req, res) => {
res.send(req.body)
console.log(req.body)
console.log("post 请求")
})
app.listen(80, () => {
console.log("app server running at http://127.0.0.0:80")
})
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
在你的代码中，你使用了FormData对象将数据附加到请求中，但是请求的Content-Type却被设置为application/x-www-form-urlencoded，这会导致数据在传输过程中被编码，从而造成无法正确解析的问题。
要解决这个问题，你需要修改请求的Content-Type为multipart/form-data，这样服务器就能正确解析FormData中的数据。同时，你还需要使用FormData对象的xhr.send()方法来发送数据。
以下是修改后的JavaScript代码：
<script>
$('#2post').on('click', function() {
const fd = new FormData();
fd.append("name", "pink");
const xhr = new XMLHttpRequest();
xhr.open('POST', "http://127.0.0.1/api");
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.log("Error:", xhr.status);
}
}
};
});
</script>
请注意，我还添加了对请求状态和状态码的检查，以便在请求完成后能够根据需要进行处理。
另外，在你的后端服务器代码中，你使用了express.urlencoded和express.json中间件来解析请求体数据。但是，由于你的请求是使用multipart/form-data格式发送的，这些中间件无法正确解析该格式的数据。
为了正确解析multipart/form-data格式的数据，你可以使用multer中间件。下面是修改后的后端服务器代码：
const express = require('express');
const app = express();
const cors = require('cors');
const multer = require('multer');
app.use(cors());
const storage = multer.memoryStorage();
const upload = multer({ storage });
const router = express.Router();
app.use('/api', router);
router.post('/', upload.none(), (req, res) => {
res.send(req.body);
console.log(req.body);
console.log("post 请求");
});
app.listen(80, () => {
console.log("app server running at http://127.0.0.0:80");
});
这里使用了multer中间件，并将其配置为使用memoryStorage存储方式来暂存文件数据。然后，在路由处理函数中，使用upload.none()来解析请求体中的数据，此时req.body将包含通过FormData发送的数据。
通过以上修改，你应该能够正确地使用FormData将数据以multipart/form-data格式发送到服务器，并能够在后端正确解析这些数据。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
你的content-type不对吧，应该是mutipart/form-data
有两种方式提交：
表单json提交：
xhr.setRequestHeader('Content-Type', 'application/json');
表单序列化提交：
$('#form').serialize();
contentType: 'application/x-www-form-urlencoded',
看你的javascript代码好像是，表单数据没有序列化，可以加一下：fd.serialize();
引用 皆我百晓生 小程序回复内容续答：
根据你提供的代码，你使用了FormData来提交数据，但是在发送请求时，你设置了请求头的Content-Type为'application/x-www-form-urlencoded'，这是不正确的。FormData对象会自动设置正确的Content-Type，你不需要手动设置。
正确的代码应该是这样的：
<script>
$('#2post').on('click', function() {
const fd = new FormData()
fd.append('name', 'pink')
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://127.0.0.1/api')
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
})
</script>
这样就可以正确地将FormData数据发送到服务器端了。在服务器端，你可以通过req.body来获取到提交的数据。
回答引用chatgpt
以下是 Node.js 中使用 AJAX 发送请求的示例代码：
const https = require('https');
const options = {
hostname: 'api.example.com',
port: 443,
path: '/api/data',
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
};
const requestData = {
name: 'John Doe',
age: 30,
email: 'johndoe@example.com'
};
const req = https.request(options, (res) => {
console.log(`statusCode: ${res.statusCode}`);
res.on('data', (d) => {
process.stdout.write(d);
});
});
req.on('error', (error) => {
console.error(error);
});
req.write(JSON.stringify(requestData));
req.end();
在上面的示例中，我们使用 Node.js 内置的 https 模块来发送请求。首先，我们定义了请求的 options，其中包括要访问的主机名、端口、路径、请求方法和请求头。然后，我们定义了要发送的数据requestData。接着，我们使用 https.request() 方法创建请求对象req，并传入options。然后，我们监听req的response事件，当服务器响应时，输出响应状态码和响应数据。最后，我们使用req.write()方法将requestData写入请求体，并通过req.end()方法结束请求。
注意，以上示例中的请求方式是 POST 请求，如果需要发送 GET 请求，则需要修改 options 对象的 method 属性为 GET，并在请求 URL 中添加查询参数。
【以下回答由 GPT 生成】
问题的关键在于前端代码中设置了错误的Content-Type，导致数据无法正确解析。
解决方案如下：
将前端代码中的xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')改为xhr.setRequestHeader('Content-Type', 'multipart/form-data')，以正确指定发送的数据类型为multipart/form-data。
另外，为了能够正确上传文件，需要在FormData对象中添加文件，可以使用input元素的files属性来获取文件对象，并使用append方法将文件添加到FormData对象中。
修改后的前端代码如下：
$('#2post').on('click', function() {
const fd = new FormData();
fd.append("name", "pink");
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
fd.append("file", file); // 添加文件到FormData对象中
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1/api');
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
console.log(xhr.responseText);
}
}
})
这样提交的数据将会按照multipart/form-data的格式进行传输，后端服务器可以正确解析。
对于后端服务器代码，根据问题描述的代码片段，无法看到完整的路由配置和处理函数，因此无法提供具体的解决方案，但是可以给出一些参考。
在使用Express框架的情况下，可以通过添加一个路由来接收POST请求，并处理接收到的数据。示例如下：
router.post('/api', (req, res) => {
const name = req.body.name; // 获取表单中的name字段值
const file = req.files.file; // 获取上传的文件对象
// 处理数据，可以将数据保存到数据库或进行其他操作
// 返回响应
res.send('Data received successfully!');
});
上述代码假设使用了multer中间件来处理文件上传，需要在服务器代码中添加multer的相关配置。具体配置可以参考multer的官方文档。
总结： 通过修改前端代码中的Content-Type，将其设为multipart/form-data，并添加文件到FormData对象中，可以解决数据无法正确解析的问题。后端服务器需要根据具体的需求进行配置和处理数据。