Как вызвать AWS API Gateway в Javascript?

Question

Я хотел бы попросить помощи в создании функции javascript для вызова шлюза API AWS. Это в основном относится к контактной форме без сервера для веб-сайта, размещенного на AWS. Я создал и протестировал лямбда-функцию, а также создал и протестировал шлюз API. Все работают как задумано. У меня проблемы с выяснением того, как будет выглядеть функция JS для вызова API. Я предоставляю HTML-код для формы, но по сути это кнопка, которая ссылается на функцию, хотя я еще не создал, под названием submitToAPI (событие). Я нашел функции онлайн для 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>