ajax - When to use $.ajax(), $('#myForm').ajaxForm, or $('#myForm').submit

Given so much different options to submit sth to the server, I feel a little confuse开发者_如何学编程d.

Can someone help me to clear the idea when I should use which and why?

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

Thank you

I personally prefer creating a function such as submitForm(url,data) that way it can be reused.

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

edit try this then:

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

Here is my understanding

$.ajax does the nice ajax way to send data to server without whole page reload and refresh. epically you want to refresh the segment on the page. But it has it's own limitation, it doesn't support file upload. so if you don't have any fileupload, this works OK.

$("#form").submit is the javascript way to submit the form and has same behaviour as the input with "submit" type, but you can do some nice js validation check before you submit, which means you can prevent the submit if client validation failed.

ajaxForm and ajaxSubmit basically are same and does the normal way form submit behaviour with some ajax response. The different between these two has been specified on their website, under FAQ section. I just quote it for some lazy people

What is the difference between ajaxForm and ajaxSubmit? There are two main differences between these methods: ajaxSubmit submits the form, ajaxForm does not. When you invoke ajaxSubmit it immediately serializes the form data and sends it to the server. When you invoke ajaxForm it adds the necessary event listeners to the form so that it can detect when the form is submitted by the user. When this occurs ajaxSubmit is called for you. When using ajaxForm the submitted data will include the name and value of the submitting element (or its click coordinates if the submitting element is an image).

A bit late, but here's my contribution. In my experience, $.ajax is the preferred way to send an AJAX call, including forms, to the server. It has a plethora more options. In order to perform the validation which @vincent mentioned, I add a normal submit button to the form, then bind to $(document).on("submit", "#myForm", .... In that, I prevent the default submit action (e.preventDefault() assuming your event is e), do my validation, and then submit.

A simplified version of this would be as follows:

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