NodeJS 服务器端阵列响应正确,但从客户端的获取请求返回空阵列

a11xaf1n  于 10个月前  发布在  Node.js
关注(0)|答案(1)|浏览(86)

我有一个服务器端的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 FormData {} clientside.js:153选定治疗:1治疗clientside.js:161响应{type:'basic',url:'http://localhost:3000/manager/findTreatment',redirected:false,status:200,ok:true,...} clientside. js:169 [] clientside.js:178
我已经审查了论坛上的其他问题,但无法调整答案来解决我的问题。
我试着将客户端代码改为一个javascript await函数,但仍然得到相同的结果。

2ekbmq32

2ekbmq321#

您正在发送FormData

const formData = new FormData(form);
fetch('manager/findTreatment', {
   method: 'POST',
   body: formData,
})

字符串
这意味着数据是以编码类型"multipart/form-data"发送的。在Express中,您需要使用可以解析该数据的包,例如multer。然而,你似乎没有发送任何文件上传,所以我建议你不要发送FormData,只是将数据转换为JSON,只要你使用服务器上的app.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
   }
})
//...
//...

相关问题