将表单中的数据发送给后台进行保存
时间: 2024-04-12 20:29:44 浏览: 119
解决vue中post方式提交数据后台无法接收的问题
要将表单中的数据发送到后台进行保存,你可以使用前端的 AJAX 或者 Fetch API 来发送 POST 请求。在后台,你可以使用 Express、Koa 或其他 Node.js 框架来处理这个请求并保存数据到数据库。
以下是一个示例代码,展示了如何使用 Fetch API 将表单数据发送到后台:
前端代码(使用 Fetch API):
```javascript
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止默认的表单提交行为
const formData = new FormData(form);
fetch('/save-data', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data); // 可选:处理从后台返回的响应数据
})
.catch(error => {
console.error(error); // 可选:处理错误
});
});
```
后端代码(使用 Express):
```javascript
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const sql = require('mssql');
// 创建数据库连接配置
const config = {
server: 'CRMTEST',
user: 'sa',
password: 'Servo01',
database: 'demo'
}
// 解析请求体的中间件
app.use(bodyParser.urlencoded({ extended: false }));
// 处理保存数据的路由
app.post('/save-data', (req, res) => {
const { name, email, password } = req.body;
// 创建连接池并连接数据库
sql.connect(config, (err) => {
if (err) {
console.log(err);
res.status(500).json({ message: '保存数据时出错' });
return;
}
// 创建 request 对象
const request = new sql.Request();
// 执行插入操作
request.query(`INSERT INTO username (name, email, password) VALUES ('${name}', '${email}', '${password}')`, (err, result) => {
if (err) {
console.log(err);
res.status(500).json({ message: '保存数据时出错' });
return;
}
console.log('用户信息已成功插入数据库');
res.json({ message: '数据保存成功' });
});
});
});
// 启动服务器
app.listen(8280, () => {
console.log('服务器已启动,监听端口 8280');
});
```
请注意,以上代码只是一个示例,你需要根据你的实际需求进行适当的修改和扩展。
阅读全文