ajax - Cuándo usar $ .ajax(), $ ('# myForm'). AjaxForm, o $ ('# myForm'). Enviar

Question

Dadas tantas opciones diferentes para enviar algo al servidor, me siento un poco confuso.

¿Alguien me puede ayudar a aclarar la idea cuando debería usar cuál y por qué?

1> $.ajax() 
2> $('#myForm').ajaxForm 
3> ajaxSubmit 
4> $('#myForm').submit 

Gracias

Answer 1

Yo personalmente prefiero la creación de una función como submitForm(url,data) de esa manera se puede reutilizar.

Javascript:

function submitForm(t_url,t_data) { 
$.ajax({ 
    type: 'POST', 
    url: t_url, 
    data: t_data, 
    success: function(data) { 
    $('#responseArea').html(data); 
    } 
}); 
} 

HTML:

<form action='javascript: submitForm("whatever.php",$("#whatevervalue").val());' method='POST'>, etc, etc

edición probar esto a continuación:

$('#yourForm').submit(function() { 
    var yourValues = {}; 
    $.each($('#yourForm').serializeArray(), function(i, field) { 
     yourValues[field.name] = field.value; 
    }); 
    submitForm('whatever.php',yourvalues); 
}); 

Answer 2

Aquí es mi entendimiento

$ .ajax hace la bonita manera ajax de enviar datos al servidor sin tener que cargar y actualizar toda la página. épicamente quieres refrescar el segmento en la página. Pero tiene su propia limitación, no admite la carga de archivos. entonces si no tienes ninguna carga de archivo, esto funciona bien.

$ ("# formulario"). Enviar es la forma de javascript para enviar el formulario y tiene el mismo comportamiento que la entrada con tipo "enviar", pero puede hacer una buena comprobación de validación js antes de enviar, lo que significa que puede evitar el envío si la validación del cliente falló.

ajaxForm y ajaxSubmit son básicamente los mismos y la forma normal de enviar el comportamiento con alguna respuesta ajax. La diferencia entre estos dos se ha especificado en su sitio web, en FAQ section. Solo lo cito para algunas personas perezosas

¿Cuál es la diferencia entre ajaxForm y ajaxSubmit? Existen dos diferencias principales entre estos métodos: ajaxEnviar envía el formulario, ajaxForm no. Cuando invocas ajaxSubmit, serializa inmediatamente los datos del formulario y lo envía al servidor. Cuando invocas ajaxForm, agrega los detectores de eventos necesarios al formulario para que pueda detectar cuándo el usuario envía el formulario. Cuando esto ocurre ajaxSubmit es llamado por usted. Al usar ajaxForm, los datos enviados incluirán el nombre y el valor del elemento que envía (o sus coordenadas de clic si el elemento que envía es una imagen).

Answer 3

Un poco tarde, pero esta es mi contribución. En mi experiencia, $.ajax es la forma preferida de enviar una llamada AJAX, incluidos formularios, al servidor. Tiene una plétora de más opciones. Para realizar la validación que mencionó @vincent, agrego un botón de envío normal al formulario, luego me enlace a $(document).on("submit", "#myForm", .... En eso, evito la acción de envío predeterminado (e.preventDefault() asumiendo que tu evento sea e), realizo mi validación y luego envío.

Una versión simplificada de este sería el siguiente:

$(document).on("submit", "#login-form", function(e) { 
    e.preventDefault(); // don't actually submit 

    // show applicable progress indicators 
    $("#login-submit-wrapper").addClass("hide"); 
    $("#login-progress-wrapper").removeClass("hide"); 
    // simple validation of username to avoid extra server calls 
    if (!new RegExp(/^([A-Za-z0-9._-]){2,64}$/).test($("#login-username").val())) { 
     // if it is invalid, mark the input and revert submit progress bar 
     markInputInvalid($("#login-username"), "Invalid Username"); 
     $("#login-submit-wrapper").removeClass("hide"); 
     $("#login-progress-wrapper").addClass("hide"); 
     return false; 
    } 
    // additional check could go here 

    // i like FormData as I can submit files using it. However, a standard {} Object would work 
    var data = new FormData(); 
    data.append("username", $("#login-username").val()); 
    data.append("password", $("#login-password").val()); // just some examples 
    data.append("captcha", grecaptcha.getResponse()); 
    $.ajax("handler.php", { 
     data: data, 
     processData: false, // prevent weird bugs when submitting files with FormData, optional for normal forms 
     contentType: false, 
     method: "POST" 
    }).done(function(response) { 
     // do something like redirect, display success, etc 
    }).fail(function(response) { 
     var data = JSON.parse(response.responseText); // parse server error 
     switch (data.error_code) { // do something based on that 
     case 1: 
      markInputInvalid($("#login-username"), data.message); 
      return; 
      break; 
     case 2: 
      markInputInvalid($("#login-password"), data.message); 
      return; 
      break; 
     default: 
      alert(data.message); 
      return; 
      break; 
     } 
    }).always(function() { // ALWAYS revert the form to old state, fail or success. .always has the benefit of running, even if .fail throws an error itself (bad JSON parse?) 
     $("#login-submit-wrapper").removeClass("hide"); 
     $("#login-progress-wrapper").addClass("hide"); 
    }); 
});