我之前使用 php web 表单创建了网站,但我正在尝试在 AWS 中使用 Lambda / API Gateway / SES 组合,同时从 S3 启动网站,以创建动态提交表单。如果您想快速查看提交表单(和错误),请访问:https ://precious-gemstones.com/about.html
这是我的 javascript,我已将其存储在 S3 存储桶的根级别:
function submitToAPI(e) {
e.preventDefault();
var URL = "https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email";
var Namere = /[A-Za-z]{1}[A-Za-z]/;
if (!Namere.test($("#name-input").val())) {
alert ("Name must be at least 2 characters.");
return;
}
if ($("#email-input").val()=="") {
alert ("Please enter your email.");
return;
}
var reemail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
if (!reemail.test($("#email-input").val())) {
alert ("Please enter a valid email address.");
return;
}
var name = $("#name-input").val();
var email = $("#email-input").val();
var message = $("#message-input").val();
var data = {
name : name,
email : email,
message : message
};
$.ajax({
type: "POST",
url : "https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email",
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function () {
// clear form and show a success message
alert("Thank you for your inquiry!");
document.getElementById("contact-form").reset();
location.reload();
},
error: function () {
// show an error message
alert("Error; please try again.");
}});
}
这是我的 Lambda 函数:
var AWS = require('aws-sdk');
var ses = new AWS.SES();
var RECEIVER = 'inquiry@precious-gemstones.com';
var SENDER = 'no-reply@precious-gemstones.com';
var response = {
"isBase64Encoded": false,
"headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'precious-gemstones.com'},
"statusCode": 200,
"body": "{\"result\": \"Success.\"}"
};
exports.handler = function (event, context) {
console.log('Received event:', event);
sendEmail(event, function (err, data) {
context.done(err, null);
});
};
function sendEmail (event, done) {
var params = {
Destination: {
ToAddresses: [
RECEIVER
]
},
Message: {
Body: {
Text: {
Data: 'name: ' + event.name + '\nemail: ' + event.email + '\nmessage: ' + event.message,
Charset: 'UTF-8'
}
},
Subject: {
Data: 'Gemstone inquiry: ' + event.name,
Charset: 'UTF-8'
}
},
Source: SENDER
};
ses.sendEmail(params, done);
}
这是我的 html 代码片段:
<div class="contact-form">
<form id="contact-form" method="post" action="https://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email">
<input name="name" type="text" class="form-control" placeholder="Your Name" required>
<br />
<input name="email" type="email" class="form-control" placeholder="Your Email" required>
<br />
<textarea name="message" class="form-control" required rows="10">Your Message</textarea>
<br />
<input type="submit" class="form-control submit" value="Send inquiry">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="submitToAPI.js"></script>
</body>
有任何想法吗?
从我的 Lambda 触发器中看到的我的 API 网关信息如下: API 端点:https ://ryj32uh9ki.execute-api.us-east-1.amazonaws.com/email/email API 类型:REST 授权:NONE 方法:POST资源路径:/email 阶段:email
当我从 Lambda 测试时,不需要密钥或授权,并且设置有效(我收到了电子邮件)。API Gateway post 方法的测试也成功。但是,它在我的网站上不起作用,这让我相信这是我的 html/JavaScript 代码中的内容,我将很快对其进行审查/修改。