Uso de la función jQuery .post en un formulario de plantilla personalizada de WordPress

Question

Actualmente estoy preparando un formulario de contacto personalizado en un sitio de WordPress que estoy tratando de enviar a través de AJAX con jQuery, sin embargo, cuando realizo la función $ .post, Firebug informa un error 404 en la consola a pesar de que puedo escribir la URL en mi barra de direcciones y muestra la página correctamente. No estoy publicando dominio cruzado.

Aquí hay un ejemplo de mi código, con código irrelevante eliminado:

<form action="" method="post" onsubmit="return submitContactForm()" class="contactform">
 <!-- inputs etc here -->
</form>

<script type="text/javascript">
function submitContactForm() {
  // Omitted error checking here, return false on error
  $.post('/contact'/, $('.contactform').serialize(), function(data) {
    alert(data);
    return false;
  });
  return true;
}
</script>

La publicación nunca tiene éxito y el formulario presenta la forma "normal" cada vez.

He probado muchas combinaciones en la parte de URL de $ .post, incluyendo /contact /, /contacto, contacto, /contacto /, incluso la URL completa del sitio sin suerte. ¿Alguien ha tenido este problema antes? ¿O estoy haciendo algo descaradamente mal? Mi única suposición es algo que ver con mi /%postname% / estructura de enlace permanente, ¡aparte de eso no tengo ni idea!

Cualquier idea/pensamiento apreciado

Gracias Andy

Answer 1

Finalmente descubrí lo que está pasando. Básicamente, la publicación de Ajax se realizaba asyncrounamente, por lo que antes de que la respuesta se hubiera recibido, el script continuó procesando

Agregar async: falso a una llamada de $ .AJAX resolvió el problema

Gracias por la ayuda

Answer 2

Esto está en documentación jQuery:

Esta es una función AJAX abreviada, que es equivalente a:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});

Prueba esto:

        $(function()
        {
            $("button#send").click(function() {
                $.ajax({
                    type: "POST",
                    url: "post.php",
                    data: $("#form").serialize(),
                    success: function(msg){
                        $("#msg_ok").html(msg);
                        $("#form").reset();
                        //alert(msg);
                    }
                });
            });
        });