POST 请求为何向 MySQL 数据库插入空值？彻底解决之道

解决POST请求向MySQL插入空值的难题

引言

在构建Web应用程序时，我们常常需要收集和存储用户输入的数据。当使用POST请求将数据发送到服务器时，确保数据的完整性至关重要，但有时可能会遇到意外的错误。本文将记录我们如何解决POST请求向MySQL数据库插入空值的问题，同时提供详细的步骤指南和相关的见解。

问题

在我们的应用程序中，我们创建了两个表单，分别用于添加客户信息（/addcustomer）和家庭信息（/addhousehold）。令人困惑的是，/addcustomer 路由正常工作，但 /addhousehold 路由却将预定义值 date_created 和 userid 以外的所有值都插入为 null。

调查

经过仔细调查，我们发现客户端发送的数据是正确的。然而，我们注意到请求标头使用文本/HTML 内容类型，而不是预期的多部分数据类型。

解决方案

修改服务器端代码：

服务器端代码需要正确解析多部分表单数据。因此，我们修改了 req.body 的接收方式，如下所示：

app.post('/addhousehold', upload.none(), (req, res) => {
  const { address, apt, workphone, city, zipcode } = req.body;

  connection.query('INSERT INTO household (address, apt, work_phone, city, zipcode, date_created, userid) VALUES (?, ?, ?, ?, ?, NOW(), ?)', [address, apt, workphone, city, zipcode, req.session.user.id], (householdError, householdResults, householdFields) => {
    ...
  });
});

更改请求标头：

在客户端，我们修改了发送POST请求的标头，使用 multipart/form-data 内容类型：

const formData = new FormData();
formData.append('address', address);
formData.append('apt', apt);
formData.append('workphone', workphone);
formData.append('city', city);
formData.append('zipcode', zipcode);

fetch('/addhousehold', {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

其他注意事项

除了修改代码和请求标头外，我们还采取了以下附加措施：

• 确保MySQL数据库中的 household 表中所有字段都具有默认值或允许为 null。
• 验证用户在发送请求之前已正确填写所有表单字段。
• 在处理 req.body 之前添加必要的输入验证和清理。

结论

通过修改服务器端代码、更改请求标头以及采取其他注意事项，我们成功解决了POST请求将空值插入MySQL数据库的问题。本指南提供了逐步说明和见解，帮助开发者解决类似的问题并确保数据的完整性。

常见问题解答

• 为什么使用 multipart/form-data 内容类型？
  multipart/form-data 内容类型用于上传文件和非文本数据，它允许我们将表单数据作为二进制流发送到服务器。

• 如何验证用户输入？
  可以使用JavaScript库或服务器端代码验证用户输入，例如 inputElement.required、inputElement.pattern 和 req.body.validationMethod()。

• 如何在服务器端清理输入？
  可以使用库或自定义函数来清理输入，例如 sanitizeHtml() 或 stripHtmlTags()。

• 如何处理默认值？
  在数据库表中设置默认值或允许为 null 可以帮助防止插入空值。

• 如何跟踪潜在错误？
  在服务器端代码中记录错误并输出到控制台或日志文件中可以帮助调试和故障排除。