Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ajax/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
通过XmlHttpRequest或Ajax发送消息信息_Ajax_Forms_Xmlhttprequest - Fatal编程技术网

通过XmlHttpRequest或Ajax发送消息信息

通过XmlHttpRequest或Ajax发送消息信息,ajax,forms,xmlhttprequest,Ajax,Forms,Xmlhttprequest,请跟我说说,因为我是网络编程新手,并且花了很长时间试图自己解决这个问题。我将node.js与express一起使用,并试图将数据从客户端发送到服务器,以便从“联系我”页面发送电子邮件 我的简单测试html表单如下所示: <form action="email" method="POST" class="contact-form"> <input type="text" id="name

请跟我说说,因为我是网络编程新手,并且花了很长时间试图自己解决这个问题。我将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>
我在这里也使用了完全相同的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");
    }
 });

});
对于这两种情况,我的服务器端代码如下:

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版本不运行onload代码。ajax版本返回500内部服务器错误,发送的数据未定义

任何帮助都将不胜感激

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}');
});