ajax - Quand utiliser $ .ajax(), $ ('# myForm'). AjaxForm, ou $ ('# myForm'). Submit

Question

Compte tenu de tant d'options différentes pour soumettre sth au serveur, je me sens un peu confus. Est-ce que quelqu'un peut m'aider à éclaircir l'idée quand je devrais utiliser quoi et pourquoi?

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

Merci

Answer 1

Personnellement, je préfère créer une fonction telle que submitForm(url,data) cette façon, il peut être réutilisé.

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

modifier essayer ceci alors:

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

Answer 2

Voici ma compréhension

$ .ajax fait la bonne manière ajax d'envoyer des données au serveur sans recharger et actualiser la page entière. épique vous voulez rafraîchir le segment sur la page. Mais il a ses propres limites, il ne supporte pas le téléchargement de fichiers. donc si vous n'avez pas de fileupload, cela fonctionne bien.

$ ("# form"). Submit est la manière javascript de soumettre le formulaire et a le même comportement que l'entrée avec le type "submit", mais vous pouvez faire une vérification de validation js avant de soumettre, ce qui signifie peut empêcher l'envoi si la validation du client a échoué.

ajaxForm et ajaxSubmit sont fondamentalement identiques et forment le comportement de soumission normal avec une certaine réponse ajax. Le différent entre ces deux a été spécifié sur leur site Web, sous FAQ section. Je le cite juste pour quelques personnes paresseuses

Quelle est la différence entre ajaxForm et ajaxSubmit? Il existe deux différences principales entre ces méthodes: ajaxSubmit soumet le formulaire, ajaxForm non. Lorsque vous invoquez ajaxSubmit, il sérialise immédiatement les données de formulaire et les envoie au serveur. Lorsque vous invoquez ajaxForm, il ajoute les écouteurs d'événement nécessaires au formulaire afin qu'il puisse détecter quand le formulaire est soumis par l'utilisateur. Lorsque cela se produit ajaxSubmit est appelé pour vous. Lors de l'utilisation d'ajaxForm, les données soumises incluront le nom et la valeur de l'élément de soumission (ou ses coordonnées de clic si l'élément de soumission est une image).

Answer 3

Un peu en retard, mais voici ma contribution. Dans mon expérience, $.ajax est le moyen préféré d'envoyer un appel AJAX, y compris les formulaires, au serveur. Il a une pléthore d'options supplémentaires. Afin d'effectuer la validation dont @vincent a parlé, j'ajoute un bouton d'envoi normal au formulaire, puis je lie à $(document).on("submit", "#myForm", .... Dans ce cas, j'empêche l'action de soumission par défaut (e.preventDefault() en supposant que votre événement est e), effectuez ma validation, puis soumettez.

Une version simplifiée de ce serait comme suit:

$(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"); 
    }); 
});