如何在 Javascript 中调用 AWS API Gateway？

Question

我想寻求有关创建 JavaScript 函数来调用 AWS API 网关的帮助。 这本质上是针对托管在 AWS 上的网站的无服务器联系表单。 我创建并测试了 lambda 函数，我创建并测试了一个 API 网关。 所有工作都按预期进行。 我无法弄清楚调用 API 的 JS 函数是什么样的。 我提供了表单的 HTML 代码，但本质上它是一个链接到函数的按钮，我还没有创建它，称为 submitToAPI(event)。 我在网上找到了 jQuery 的函数，但我在这方面的知识基本上是空的。

如果可能，不要尝试使用 nodejs 或 jQuery（不要试图变得困难，但我不知道如何使用它们）。

<form id="contact-form" method="post">
  <h4>Name:</h4>
  <input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
  <h4>Phone:</h4>
  <input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
  <h4>Email:</h4>
  <input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
  <h4>How can we help you?</h4>
  <textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
  <div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
  <button type="button" onClick="submitToAPI(event)" class="btn btn-primary">Submit</button>
</form>

Answer 1

您可以使用action属性： <form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">...</form>

并使用submit类型的按钮： <button type="submit" class="btn btn-primary">Submit</button>

这是文档的链接： https ://www.w3schools.com/tags/att_form_action.asp

这是一个例子：

 <form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post"> <h4>Name:</h4> <input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/> <h4>Phone:</h4> <input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/> <h4>Email:</h4> <input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/> <h4>How can we help you?</h4> <textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/> <div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div> <button type="submit" class="btn btn-primary">Submit</button> </form>

Answer 2

只需将此脚本标记粘贴到您当前脚本的上方，这样它就是第一个..

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>