如何解决通过 XmlHttpRequest 或 Ajax 发送消息信息
请原谅我,因为我是网络编程的新手,并且花了很长时间试图自己解决这个问题。我正在将 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,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("/",res) {
var data = JSON.parse(req.body)
console.log(data);
});
app.listen(PORT,res) {
console.log('Listening on port ${PORT}');
});
我的 XMLHttpRequest 版本没有运行 onload 代码。 ajax版本返回500内部服务器错误,发送的数据未定义。
任何帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。