Gửi dữ liệu từ NodeJS trở lại cùng một trang html sau khi gửi biểu mẫu

Bạn không thể gửi dữ liệu đến trang HTML. HTML là một định dạng tệp tĩnh và không thể tự nhận dữ liệu. Máy chủ có thể, nhưng không phải tệp HTML.

Tuy nhiên, những gì bạn có thể làm là chặn yêu cầu đăng bài của bạn ở phía máy khách, gửi nó đến máy khách bằng cách sử dụng XHR và nhận lại dữ liệu ở phía máy khách, sau đó làm bất cứ điều gì bạn muốn khi tập lệnh nhận được datos . Về cơ bản, mọi thứ xảy ra giữa phần JavaScript của trang và máy chủ Node nhận dữ liệu POST và gửi lại datos .

Dưới đây là một ví dụ đơn giản về cách bạn có thể chặn yêu cầu ĐĂNG ở phía máy khách:

document.querySelector('form').onsubmit = evt => {

  // don't submit the form via the default HTTP redirect
  evt.preventDefault();
  
  // get the form values
  const formData = {
    name1: document.querySelector('input[name=name1]').value,
    name2: document.querySelector('input[name=name2]').value
  }
  console.log('formData:', formData);
  
  // send the form encoded in JSON to your server
  fetch('https://your-domain.com/path/to/api', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(formData),
  })
  
  // receive datos from the server
  .then(resp => resp.json())
  .then(datos => {/* do what you want here */})
  
  // catch potential errors
  .catch(err => console.log('an error happened: '+err));
  
}

<form>
  <input name="name1" value="value1">
  <input name="name2" value="value2">
  <button type="submit">Submit</button>
</form>

Tái bút:Đoạn mã trên sẽ không thành công với lỗi mạng vì chỉ có tập lệnh phía máy khách - không có gì đang chạy tại https://your-domain.com/path/to/api , nhưng bạn đã đưa mã máy chủ phù hợp vào câu hỏi của mình. Chỉ cần kết thúc tập lệnh máy chủ bằng res.send(datos) .