Tengo un formulario en mi proyecto y cuando se envía, necesito enviar los datos a una API y recibir la respuesta para verificar si hay errores.
el html
<form id="contactForm" class="w-75 mx-auto"> <input type="text" class="form-control bg-transparent" placeholder="Name"> <input type="email" class="form-control bg-transparent my-3" placeholder="E-mail"> <textarea class="form-control bg-transparent" placeholder="Your Message"></textarea> <button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button> </form>el js
$('#contactForm').submit(function (e) { e.preventDefault(); });Puede usar fetch api y el método POST para enviar datos a una API. Dado que no ha proporcionado cómo funciona su API o cómo se pasan los datos, no puedo brindarle más ayuda, pero puedo guiarlo hacia la ruta correcta.
Obtenga más información sobre buscar API en javascript
(async function () { const url = ''; // your api endpoint here const res = await fetch(url, { method: 'POST' }); // res corresponds to the api response; })();Como está usando jQuery, probablemente debería leer el método de publicación de jQuery
Esto debería funcionar. Asegúrese de que la URL para la API y la web sean las mismas; de lo contrario, podría obtener un error entre sitios:
<form id="contactForm" class="w-75 mx-auto" action="http://yourAPI.com"> <input type="text" class="form-control bg-transparent" placeholder="Name"> <input type="email" class="form-control bg-transparent my-3" placeholder="E-mail"> <textarea class="form-control bg-transparent" placeholder="Your Message"></textarea> <button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $('#contactForm').submit(function (e) { e.preventDefault(); // avoid to execute the actual submit of the form. var form = $(this); var url = form.attr('action'); $.ajax({ type: "POST", url: url, data: form.serialize(), // serializes the form's elements. success: function(data) { alert(data); // show server response } }); }); </script>$("#contactForm").submit( async (e) => { e.preventDefault(); const data = { name: e.target.elements[0].value, email: e.target.elements[1].value, message: e.target.elements[2].value, } const response = await fetch(url, { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, same-origin credentials: 'same-origin', // include, *same-origin, omit headers: { 'Content-Type': 'application/json' }, redirect: 'follow', // manual, *follow, error referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when- downgrade, origin, origin-when-cross-origin, same-origin, strict- origin, strict-origin-when-cross-origin, unsafe-url body: JSON.stringify(data) // body data type must match "Content-Type" header }); })