如何在 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>