Question

我有一个静态网站，该网站通过aws S3存储桶并使用cloudfront托管。

我一直在尝试建立联系表单，使用jquery将表单转换为python并提交给我的aws API网关（依次调用lambda函数以通过SES将表单作为电子邮件发送）。

>

我已经按照一些教程进行了操作，尽管我可以在AWS测试功能上运行有效的测试（在API网关和lambda中），但是该测试永远无法在网站上运行。

当我单击网站上的“提交”按钮时，页面会刷新-没有错误或成功消息，也没有发送电子邮件。

由于它在aws控制台中工作（它按预期方式发送了一封电子邮件），但在网站中却没有，特别是我得到页面刷新而不是错误，这使我相信问题出在js或html < / p>

该表单的html是：

<div class="form contact-form">
          <div id="sendmessage">Your message has been sent. Thank you!</div>
          <div id="errormessage"></div>
          <form method="post" role="form" class="contactForm">
            <div class="form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
              <div class="validation"></div>
            </div>
            <div class="text-center"><button name="submit" id="submit" class="ready-btn right-btn" onclick="">Contact Us</button></div>
          </form>
        </div>
<script src="contactform/contactform.js"></script>

contactform / contactform.js上的javascript是

$(document).ready(function() {

  $("#submit").click(function(e) {
  e.preventDefault();

  var name = $("#name").val(),
      email = $("#email").val(),
      subject = $("#subject").val(),
      message = $("#message").val();

  $.ajax({
      type: "POST",
      url: 'APIGATEWAY_URL',
      contentType: 'application/json',
      data: JSON.stringify({
          'name': name,
          'email': email,
          'subject': subject,
          'message': message
      }),
      success: function(res){
          $('#form-response').text('Thank you for your message, we will respond soon..');
      },
      error: function(){
          $('#form-response').text('Error sending message.');
      }
  });
   })
    });

有人能阐明为什么这只是导致页面刷新而不执行任何操作吗？

Answer 1

在您的<form>的{{1}}属性中，执行以下操作：

onclick

您还应该在按钮的事件处理程序中添加一个onlclick="return false;"或console.log()调用，以确保该函数被实际调用。如果不是，请检查您是否正确包含了javascript文件。

来自与aws的jQuery和lambda的联系

1 个答案: