Portada » Preguntas Frecuentes de .NET 6 » ¿Cómo evitar reenviar el formulario al hacer un POST con Ajax?

¿Cómo evitar reenviar el formulario al hacer un POST con Ajax?

Si has venido a por una respuestá rápida, para evitar reenviar el formulario al hacer un POST con Ajax, cambia el tipo de botón de «submit» a «button».

<!-- Genera mensaje de reenvio de formulario -->
<button type="submit" onclick="submitForm()">ACCEPT</button>

<!-- Evita mensaje de reenvio de formulario -->
<button type="button" onclick="submitForm()">ACCEPT</button>

Mensaje que queremos evitar, indicando que se va a reenviar el formulario si refrescas la página.

Y en ambos casos, el botón es capaz de llamar al evento «submitForm()» de Javascript y enviar la petición de submit al servidor. Esto ya de por si es todo lo que necesitas para evitar reenviar el formulario, aún así, también te dejo dos posibles implementaciones del método javascript con JQuery y con Vanilla Javascript (usando la API Fetch).

Usando JQuery

const submitForm = () => $.post("Controller/Action", { key: value })
    .done(() => console.log("exito"))
    .fail(() => console.log("error"));

Usando Vanilla Javascript

const submitForm = () => fetch(`Notifications/CloseAllNotifications`,
        {
            method: "POST",
            mode: "cors",
            body: { key: value },
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            }
        })

Si el método de submit que se quiere hacer del formulario es «POST», es aconsejable leer también: «¿Cómo enviar el Antiforgery Token en una petición Ajax con .NET 6 MVC?«. En ese artículo vemos cómo pasarle el Antiforgery Token para que podamos validarlo con el DataAnnotation [ValidateAntiforgeryToken] en un controlador de .NET 6 MVC y mejorar la seguridad de la petición.

Referencias: