服务器端数组响应正确，但从客户端的提取请求返回空数组-解网

问：

我有一个服务器端js文件，运行以下功能。这将根据在html表单上选择下拉输入来查询mysql数据库，然后提交此选定项目。

服务器端 JS

exports.findTreatment = (req, res) => {
  const selectedTreatment = req.body.selectedTreatment;

  console.log(selectedTreatment);

  db.query('SELECT * FROM treatments WHERE treatmentName = ?', [selectedTreatment], (error, result) => {
    if (error) {
      throw error
    }
    console.log(result);
    return res.json(result);

  });
};

这工作正常，控制台按预期记录与所选处理相关的 json 对象，但是，当我尝试使用来自客户端的获取请求调用它时，我会得到一个空数组。

客户端 JS

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('searchTreatment');

  if (form) {
    form.addEventListener('submit', function(event) {
      event.preventDefault();

      const formData = new FormData(form);
      console.log('FormData', formData);
      console.log('Selected Treatment:', formData.get('selectedTreatment'));

      fetch('manager/findTreatment', {
        method: 'POST',
        body: formData,
      })

      .then ((response) => {
        console.log(response);
        if(response.ok) {
          return response.json();
        } else {
          throw new Error('Form submission failed');
        }
      })
      .then((data) => {
        console.log(data);
      
        if (data && data.length > 0) {
          const selectedTreatment = data[0];
          document.getElementById('treatmentNameUpdate').value = selectedTreatment.treatmentName;
          document.getElementById('treatmentPriceUpdate').value = selectedTreatment.treatmentPrice;
          document.getElementById('treatmentDurationUpdate').value = selectedTreatment.treatmentDuration;
          document.getElementById('costOfTreatmentUpdate').value = selectedTreatment.costOfTreatment;
        } else {
          console.error('No treatment found.');
        }
        })
      .catch((error) => {
        console.log(error);
      });
    });
  }
});

控制台日志

表单数据 FormData {} 客户端.js：153 选择的治疗： 1 Treamtent 客户端.js：161 响应 {type： 'basic'， url： 'http://localhost:3000/manager/findTreatment'， redirected： false， status： 200， ok： true， ...} clientside.js：169 [] 客户端.js：178

我已经在论坛上查看了其他问题，但无法调整答案来解决我的问题。

我尝试将客户端代码更改为异步 await 函数，但仍然得到相同的结果。

节点.js 快速提取

这意味着数据是以编码类型发送的。在 Express 中，您需要使用可以解析该数据的包，例如 multer。但是，您似乎没有发送任何文件上传，因此我建议您不要发送，只需将该数据转换为JSON，只要您使用服务器上的中间件来解析数据，您就应该能够获得所需的响应。"multipart/form-data"FormDataapp.use(express.json());

进行以下更改：

const formData = new FormData(form);
console.log('FormData', formData);
console.log('Selected Treatment:', formData.get('selectedTreatment'));

const pojoForm = Object.fromEntries(formData.entries()); //< Convert to POJO

fetch('manager/findTreatment', {
   method: 'POST',
   body: JSON.stringify(pojoForm), //< Send as JSON
   headers: {
      "Content-Type": "application/json", //< Set correct header
   }
})
//...
//...

谢谢JQueeny，感谢您抽出宝贵时间回复。该表格确实包括可能的文件上传（不是必需的），我已经设置了 Multer 来处理这个问题。我将formData变量从FormData更改为URLSearchParams，同时保持代码的其余部分相同，这适用于更新服务器中的数据，尽管我必须承认我不明白这背后的逻辑。我也没有从表单更新文件上传，但我想这是因为我没有在我的客户端代码中处理表单的这一部分（它在服务器端点中设置）。

0赞 jQueeny 11/14/2023

@StephenCummings从 FormData 更改为 URLSearchParams 时，将发送数据，这是表单的默认设置。例如，只要您在服务器上有一个正文解析器，那么数据就是这样被成功解析的。你自己修好了。'Content-Type': 'application/x-www-form-urlencoded'app.use(express.urlencoded())

上一个：提取后重定向到结果页面

下一个：从 api 获取数据并渲染数据需要太多时间

服务器端数组响应正确，但从客户端的提取请求返回空数组

Server Side Array Response Correct but Empty Array Returned from Fetch Request on Client Side

评论

评论