Geek Answers Handbook

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

Given the many different options for sending sth to the server, I'm a bit confused.

Can someone help me figure out when I should use what and why?

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

thank

+5
source share
3 answers

I personally prefer to create a feature such submitForm(url,data)that 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.

change try the following:

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

Here is my understanding

$. ajax ajax . . , . , , .

$( "# form" ). submit - javascript , "", - js , , , .

ajaxForm ajaxSubmit , ajax. - FAQ.

ajaxForm ajaxSubmit? : ajaxSubmit , ajaxForm - . ajaxSubmit, . ajaxForm, , , ​​. , ajaxSubmit. ajaxForm ( , ).

+1

A bit late, but here is my contribution. In my experience, this $.ajaxis the preferred way to send an AJAX call, including forms, to the server. It has many features. To perform the verification indicated by @vincent, I add a regular submit button to the form and then bind to $(document).on("submit", "#myForm", .... In this case, I prevent the default send action ( e.preventDefault()if your event e), do my check and submit.

A simplified version of this will 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");
    });
});
0
source

More articles: