时事通讯注册api的问题

Question

我创建的表单旨在将用户输入的电子邮件发送到我的Sendgrid联系人列表。它成功地做到了这一点，但有几个问题:

1. 提交时页面卡住加载

2. 前端逻辑不工作，因为我希望它隐藏输入和显示文本

后端代码:

app.post('/subscribe', (req, res) => {
const { email } = req.body;
const options = {
method: 'PUT',
url: 'https://api.sendgrid.com/v3/marketing/contacts',
headers:
{
'content-type': 'application/json',
authorization: 'Bearer **MYSECRETKEY**'
},
body:
{
list_ids: ['**MYSECRETID**'],
contacts:
[{
email: email,
}]
},
json: true
};
request(options, function (error, response, body) {
if (error) { 
throw new Error(error);
} else {
res.status(200);
}
});
})

格式为

<div id="signup">
<form action="/subscribe" method="POST" novalidate class="validated-form">
<label class="form-label" for="signup">Signup to receive the latest tips & trends</label>
<input class="form-control" type="email" id="email" name="email" placeholder="[e-mail]" required>
<input type="submit" value="SUBMIT" class="button" id="cta">
</form>
</div>
<div id="success" class="inner-form">
<h2 class="text-center">Thank you!</h2>
</div>

这是前端Javascript

<script>
let cta = document.getElementById('cta');
let email = document.getElementById('email').value;
let error = document.getElementById('error');
let success = document.getElementById('success');
let signup = document.getElementById('signup');
cta.addEventListener('click', (event) => {
if (this.email.value == null || this.email.value == "") {
error.classList.add('errorAnim');
} else {
let fetchData = {
method: 'POST',
body: JSON.stringify({ email: this.email.value }),
headers: { "Content-Type": "application/json" }
}
fetch('/subscribe', fetchData)
.then(res => {
if (res.ok) {
signup.classList.add('fadeout');
success.classList.add('fadein');
} else {
error.classList.add('errorAnim');
}
})
}
})
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.validated-form')
// Loop over them and prevent submission
Array.from(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

谢谢你的帮助!我还在学习

Answer 1

Twilio SendGrid开发者布道者在此。

如果你的服务器端被卡住了，那么可能有一个错误从API返回，你没有响应请求。尝试在错误子句中添加响应:

request(options, function (error, response, body) {
if (error) { 
throw new Error(error);
res.status(500).send(error.message);
} else {
res.status(200).send();
}
});

在你的前端代码中，你指的是this.email，但我不认为this.email是在这种情况下设置的。您确实在前面创建了一个email变量(let email = document.getElementById('email').value;)，但这是代码在页面加载时运行时的电子邮件字段的值，而不是在提交表单时。因此，我将更改变量以获取元素，然后使用email变量查找发送时的值。

侦听表单的提交事件也比侦听表单中按钮的单击事件要好。这允许您通过在表单字段中按回车键来捕获表单提交，而不是仅仅依赖于单击按钮。然后，当您这样做时，您需要防止默认的表单提交行为。您可以使用event.preventDefault()。

让我们更新HTML，为表单添加一个id，以便我们以后可以选择它:

<div id="signup">
<form action="/subscribe" method="POST" novalidate class="validated-form" id="signup-form">
<label class="form-label" for="signup">Signup to receive the latest tips & trends</label>
<input class="form-control" type="email" id="email" name="email" placeholder="[e-mail]" required>
<input type="submit" value="SUBMIT" class="button" id="cta">
</form>
</div>
<div id="success" class="inner-form">
<h2 class="text-center">Thank you!</h2>
</div>

let form = document.getElementById('signup-form');
let email = document.getElementById('email');
let error = document.getElementById('error');
let success = document.getElementById('success');
let signup = document.getElementById('signup');
form.addEventListener('submit', (event) => {
event.preventDefault();
if (email.value == null || email.value == "") {
error.classList.add('errorAnim');
} else {
let fetchData = {
method: 'POST',
body: JSON.stringify({ email: email.value }),
headers: { "Content-Type": "application/json" }
}
fetch('/subscribe', fetchData)
.then(res => {
if (res.ok) {
signup.classList.add('fadeout');
success.classList.add('fadein');
} else {
error.classList.add('errorAnim');
}
})
}
})

如果有帮助，请告诉我。