Блог

Пожалуйста, поделитесь со мной, так как я новичок в веб-программировании и потратил много времени, пытаясь разобраться в этом самостоятельно. Я использую node.js с помощью express и пытаюсь отправить данные от моего клиента на сервер, чтобы отправить электронное письмо со страницы «Свяжитесь со мной».

Моя простая тестовая html-форма выглядит так:

 <form action="email" method="POST" class="contact-form">
  <input type="text" id="name" placeholder="Your Name" value="Test">
  <input type="email" id="email" placeholder="Your Email" value="Bob@bob.com">
  <input type="text" id="subject" placeholder="Subject" value="Subject of Email">
  <textarea cols="30" rows="7" id="message" placeholder="Message" >I was here.</textarea>
  <input type="submit" value="Send Message" class="submit">
</form>
 

Это код для моего сервера, использующего XMLHttpRequest:

 const contactForm = document.querySelector(".contact-form");
let name    = document.getElementById("name");
let email   = document.getElementById("email");
let subject = document.getElementById("subject");
let message = document.getElementById("message");

contactForm.addEventListener("submit", (e) => {
e.preventDefault();

let formData = {
  name: name.value,
  email: email.value,
  subject: subject.value,
  message: message.value
}

let xhr = new XMLHttpRequest();
xhr.open("POST", "/");
xhr.setRequestHeader("content-type", "application/json");
xhr.onload = function() {
console.log(xhr.responseText); //This never runs
if(xhr.responseText == "success") {
  alert("Email sent"); //this never fires
  name.value = "";
  email.value = "";
  subject.value = "";
  message.value = "";
} else {
  alert("Something went wrong!"); //nor does this
}

  console.log(xhr.statusText); //nor does this
  xhr.send(JSON.stringify(formData));
}

});
 

У меня также есть точно такая же вещь, использующая ajax здесь.

 const contactForm = document.querySelector(".contact-form");
let name    = document.getElementById("name");
let email   = document.getElementById("email");
let subject = document.getElementById("subject");
let message = document.getElementById("message");

contactForm.addEventListener("submit", (e) => {
  e.preventDefault();

  let formData = {
    name: name.value,
    email: email.value,
    subject: subject.value,
    message: message.value
  }

  $.ajax({
    type: 'POST',
    url: "/",
    contentType: "application/json; charset=utf-8",
    datatype: 'json',
    data: formData,
    success: function (response) {
        console.log(response);
    },
    error: function(error) {
        console.log("error");
    }
 });

});
 

For both cases, my server side code is this:

 const express = require("express");
const app = express();

const PORT = process.env.PORT || 3000;

//Middleware
app.use(express.static("public"));

app.get("/", function(req, res) {
    //send html file. Do this so that other code can run.
    res.sendFile(__dirname   "/contactform.html");
});

app.post("/", function(req, res) {
     var data = JSON.parse(req.body)
     console.log(data);
  });
  

app.listen(PORT, function(req, res) {
    console.log('Listening on port ${PORT}');
});
 

Моя версия XMLHttpRequest не запускает код загрузки. Версия ajax возвращает 500 внутренних ошибок сервера, и отправленные данные не определены.

Любая помощь будет признательна.