ajax - когда использовать $ .ajax (), $ ('# myForm'). ajaxForm или $ ('# myForm'). submit

Question

Учитывая так много разных вариантов отправки sth на сервер, я чувствую себя немного смущенным.

Может ли кто-нибудь помочь мне прояснить идею, когда я должен использовать, что и почему?

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

Спасибо

Answer 1

Я лично предпочитаю создавать такую ​​функцию, как submitForm(url,data), чтобы ее можно было повторно использовать.

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

изменить попробуйте это:

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

Answer 2

Вот мое понимание

$. Ajax делает отличный способ ajax отправлять данные на сервер без перезагрузки и обновления всей страницы.эпично вы хотите обновить сегмент на странице.Но у него есть свои ограничения, он не поддерживает загрузку файлов.так что если у вас нет файла загрузки, это работает хорошо.

$ ("# form"). Submit - это способ отправки формы с использованием javascript, аналогичный вводу с типом "submit", но перед отправкой вы можете выполнить некоторую хорошую проверку js-проверки, котораяозначает, что вы можете предотвратить отправку, если проверка клиента не удалась.

ajaxForm и ajaxSubmit в основном одинаковы и выполняют обычную форму отправки формы поведения с некоторым ответом ajax.Различия между ними указаны на их веб-сайте в разделе FAQ .Я просто цитирую это для некоторых ленивых людей

В чем разница между ajaxForm и ajaxSubmit?Существует два основных различия между этими методами: ajaxSubmit отправляет форму, ajaxForm - нет.Когда вы вызываете ajaxSubmit, он немедленно сериализует данные формы и отправляет их на сервер.Когда вы вызываете ajaxForm, он добавляет в форму необходимых слушателей событий, чтобы он мог определить, когда форма отправлена ​​пользователем.Когда это происходит, ajaxSubmit вызывается для вас.При использовании ajaxForm представленные данные будут включать имя и значение отправляющего элемента (или его координаты щелчка, если отправляющим элементом является изображение).

Answer 3

Немного поздно, но вот мой вклад. По моему опыту, $.ajax является предпочтительным способом отправки вызова AJAX, включая формы, на сервер. У этого есть множество других вариантов. Чтобы выполнить проверку, о которой упоминал @vincent, я добавляю в форму обычную кнопку отправки, а затем привязываюсь к $(document).on("submit", "#myForm", .... При этом я запрещаю действие отправки по умолчанию (e.preventDefault() при условии, что ваше событие e), выполняю проверку и затем отправляю.

Упрощенная версия этого будет выглядеть следующим образом:

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