如何使用Javascript调用AWS API Gateway?

时间:2019-04-17 20:11:17

标签: javascript aws-lambda

我想寻求帮助来创建一个JavaScript函数来调用AWS API网关。这本质上是针对AWS托管的网站的无服务器联系表。我创建并测试了lambda函数,并创建并测试了API网关。所有工作均按预期进行。我在弄清楚调用该API的JS函数时遇到了麻烦。我正在提供表单的HTML代码,但从本质上讲,它是一个链接到我尚未创建的函数的按钮,该函数称为commitToAPI(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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

只需将此脚本标签粘贴到您当前的脚本上方,即可成为第一个..

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