表单提交成功后通过Javascript显示来自Lambda的消息
我正在使用将联系人表单添加到我的无服务器网站(托管在S3上)。成功发送电子邮件后,Lambda实例返回消息表单提交成功后通过Javascript显示来自Lambda的消息,javascript,python,amazon-web-services,aws-lambda,aws-api-gateway,Javascript,Python,Amazon Web Services,Aws Lambda,Aws Api Gateway,我正在使用将联系人表单添加到我的无服务器网站(托管在S3上)。成功发送电子邮件后,Lambda实例返回消息“谢谢!您可以在此处下载示例:”。我想向提交表单的用户显示该消息,但我不知道如何执行。目前,我的javascript根据来自AWS API网关的响应代码显示硬编码消息。但我不想在javascript中包含下载url,因为我不希望用户在不通过表单注册的情况下就能看到下载 是否有方法获取Lambda实例返回的字符串并将其传递回响应体,然后通过javascript向用户显示该消息 表单的当前jQu
“谢谢!您可以在此处下载示例:”
。我想向提交表单的用户显示该消息,但我不知道如何执行。目前,我的javascript根据来自AWS API网关的响应代码显示硬编码消息。但我不想在javascript中包含下载url,因为我不希望用户在不通过表单注册的情况下就能看到下载
是否有方法获取Lambda实例返回的字符串并将其传递回响应体,然后通过javascript向用户显示该消息
表单的当前jQuery javascript:
! function($) {
"use strict";
$("form", ".contact-form ").submit(function(t) {
t.preventDefault();
var r = !0,
s = this,
e = $(s).siblings(".contact-form-result"),
o;
// Escape if the honeypot has been filled
if (!!$("#whatname").val()) return;
if ($(s).find(":required").each(function() {
$(this).css("border-color", ""), $.trim($(this).val()) || ($(this).css("border-color", "red"), r = !1);
var t = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
"email" != $(this).attr("type") || t.test($.trim($(this).val())) || ($(this).css("border-color", "red"), r = !1)
}).keyup(function() {
$(this).css("border-color", "")
}).change(function() {
$(this).css("border-color", "")
}), r) {
//var c = $(this).serialize();
var firstname = $("#name-input").val();
var lastname = $("#lastname-input").val();
var mobile = $("#mobile-input").val();
var email = $("#email-input").val();
var message = $("#message-input").val();
var data = {
firstname : firstname,
lastname : lastname,
mobile : mobile,
email : email,
message : message }
$.ajax({
url: "PATH-TO-AMAZON-API",
type: "post",
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
beforeSend: function(data) {
$('#submit-mail').attr('disabled', true);
//$('#status').html('<i class="fa fa-refresh fa-spin"></i> Sending Mail...').show();
o = '<p class="form-message form-success">Sending...</p>';
e.removeClass("hidden").html(o)
},
success: function (data) {
// clear form and show a success message
//alert("Successfull");
o = '<p class="form-message form-success">Thank you for your message!</p>';
e.removeClass("hidden").html(o)
$(s)[0].reset();
setTimeout(function() {
e.addClass("hidden").html("")
}, 5e3);
$('#submit-mail').removeProp('disabled');
},
error: function (jqXHR, textStatus, errorThrown) {
// show an error message
//alert("UnSuccessfull");
o = '<p class="form-message form-error">Sorry, there was an error. Please try again later.</p>';
e.removeClass("hidden").html(o)
setTimeout(function() {
e.addClass("hidden").html("")
}, 5e3);
$('#submit-mail').removeProp('disabled');
}
});
}
})
}(jQuery);
!函数($){
“严格使用”;
$(“表格”、“联系表格”)。提交(功能(t){
t、 预防默认值();
var r=!0,
s=这个,
e=$(s).同级(“.contact form result”),
o;
//如果蜜罐装满了,就逃走
如果(!!$(“#whatname”).val()返回;
if($(s).find(“:required”).each(函数(){
$(this.css(“边框颜色”,“红色”),$.trim($(this.val())| |($(this.css(“边框颜色”,“红色”),r=!1);
变量t=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})$/;
“email”!=$(this.attr(“type”)| | t.test($.trim($(this.val()))| |($(this.css)(“边框颜色”,“红色”),r=!1)
}).keyup(函数(){
$(this.css(“边框颜色”,“”)
}).change(函数(){
$(this.css(“边框颜色”,“”)
}),r){
//var c=$(this.serialize();
var firstname=$(“#名称输入”).val();
var lastname=$(“#lastname输入”).val();
var mobile=$(“#移动输入”).val();
var email=$(“#电子邮件输入”).val();
var message=$(“#消息输入”).val();
风险值数据={
名字:名字,
lastname:lastname,
手机:手机,,
电邮:电邮,,
消息:消息}
$.ajax({
url:“路径到亚马逊API”,
类型:“post”,
数据类型:“json”,
跨域:“真”,
contentType:“应用程序/json;字符集=utf-8”,
数据:JSON.stringify(数据),
发送前:函数(数据){
$(“#提交邮件”).attr('disabled',true);
//$('#status').html('Sending Mail…').show();
o=“发送…
”;
e、 removeClass(“隐藏”).html(o)
},
成功:功能(数据){
//清除表单并显示成功消息
//警报(“成功”);
o='感谢您的留言!
';
e、 removeClass(“隐藏”).html(o)
$(s)[0]。重置();
setTimeout(函数(){
e、 addClass(“隐藏”).html(“”)
},5e3);
$(“#提交邮件”).removeProp('disabled');
},
错误:函数(jqXHR、textStatus、errorshown){
//显示错误消息
//警报(“未成功”);
o='很抱歉,出现错误。请稍后再试。
';
e、 removeClass(“隐藏”).html(o)
setTimeout(函数(){
e、 addClass(“隐藏”).html(“”)
},5e3);
$(“#提交邮件”).removeProp('disabled');
}
});
}
})
}(jQuery);
以及我的Python Lambda函数(使用API、SES和Dynamo[目前未使用Dynamo]):
导入boto3
从botocore.exceptions导入ClientError
导入json
导入操作系统
导入时间
导入uuid
输入小数
client=bot3.client('ses')
sender=os.environ['sender\u EMAIL']
subject=os.environ['EMAIL\u subject']
configset=os.environ['CONFIG\u SET']
字符集='UTF-8'
dynamodb=boto3.resource('dynamodb')
接受者example@email.com'
def sendMail(事件、上下文):
打印(事件)
#邮寄联系方式
尝试:
数据=事件['body']
content='来自'+data['firstname']+''+data['lastname']+',
手机:'+data['mobile']+',
消息内容:'+data['Message']
#saveToDynamoDB(数据)
response=sendMailToUser(数据、内容)
除ClientError作为e外:
打印(例如响应['Error']['Message'])
其他:
打印(“已发送电子邮件!邮件Id:”),
打印(响应['MessageId'])
return“谢谢!您可以在此处下载示例:”
def列表(事件、上下文):
table=dynamodb.table(os.environ['dynamodb_table'])
#从数据库中获取所有记录
结果=table.scan()
#返回响应
返回{
“状态代码”:200,
“正文”:结果['Items']
}
def saveToDynamoDB(数据):
timestamp=int(time.time()*1000)
#在DynamoDB表中插入详细信息
table=dynamodb.table(os.environ['dynamodb_table'])
项目={
“id”:str(uuid.uuid1()),
“firstname”:数据['firstname'],
“lastname”:数据['lastname'],
“电子邮件”:数据[“电子邮件”],
“消息”:数据[“消息”],
“createdAt”:时间戳,
“updatedAt”:时间戳
}
表.放置项目(项目=项目)
返回
def sendMailToUser(数据、内容):
#使用SES发送电子邮件
返回client.send_电子邮件(
来源=发送方,
ReplyToAddresses=[data['email']],
目的地={
“ToAddresss”:[
收件人
],
},
import boto3
from botocore.exceptions import ClientError
import json
import os
import time
import uuid
import decimal
client = boto3.client('ses')
sender = os.environ['SENDER_EMAIL']
subject = os.environ['EMAIL_SUBJECT']
configset = os.environ['CONFIG_SET']
charset = 'UTF-8'
dynamodb = boto3.resource('dynamodb')
recipient = 'example@email.com'
def sendMail(event, context):
print(event)
#Send mail for contact form
try:
data = event['body']
content = 'Message from ' + data['firstname'] + ' ' + data['lastname'] + ',<br>Phone: ' + data['mobile'] + ',<br>Message Contents: ' + data['message']
#saveToDynamoDB(data)
response = sendMailToUser(data, content)
except ClientError as e:
print(e.response['Error']['Message'])
else:
print("Email sent! Message Id:"),
print(response['MessageId'])
return "Thank you! You can download the sample here: <a href='https://someurl.com'>Download</a>"
def list(event, context):
table = dynamodb.Table(os.environ['DYNAMODB_TABLE'])
# fetch all records from database
result = table.scan()
#return response
return {
"statusCode": 200,
"body": result['Items']
}
def saveToDynamoDB(data):
timestamp = int(time.time() * 1000)
# Insert details into DynamoDB Table
table = dynamodb.Table(os.environ['DYNAMODB_TABLE'])
item = {
'id': str(uuid.uuid1()),
'firstname': data['firstname'],
'lastname': data['lastname'],
'email': data['email'],
'message': data['message'],
'createdAt': timestamp,
'updatedAt': timestamp
}
table.put_item(Item=item)
return
def sendMailToUser(data, content):
# Send Email using SES
return client.send_email(
Source=sender,
ReplyToAddresses=[ data['email'] ],
Destination={
'ToAddresses': [
recipient,
],
},
Message={
'Subject': {
'Charset': charset,
'Data': subject
},
'Body': {
'Html': {
'Charset': charset,
'Data': content
},
'Text': {
'Charset': charset,
'Data': content
}
}
}
)
success: function (data) {
// clear form and show a success message
//alert("Successfull");
o = '<p class="form-message form-success">' + data + '</p>';
e.removeClass("hidden").html(o)
$(s)[0].reset();
setTimeout(function() {
e.addClass("hidden").html("")
}, 5e3);
$('#submit-mail').removeProp('disabled');
},