Question

鉴于提交服务器有很多不同的选择，我感到有些困惑。

当我应该使用哪个以及为什么时，有人可以帮助我清除这个想法吗？

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'>等等

编辑然后尝试：

$('#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 section下指定。我只是为一些懒惰的人引用它

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

ajax - 何时使用$ .ajax（），$（'＃myForm'）。ajaxForm或$（'＃myForm'）。

3 个答案: