通过 jQuery 命令提交表单数据答案

【问题标题】：Submitting form data through a jQuery command通过 jQuery 命令提交表单数据
【发布时间】：2011-11-29 05:52:51
【问题描述】：

我正在处理一个 MVC 项目，并且正在创建一组不同的提交按钮，每个按钮在提交时将不同的值传递给控制器。

在我当前的代码中，我调用了提交函数，首先创建隐藏的输入元素来传递我想要的数据，如下所示：

    $('#btnCreate').live('click', function () {
    $('#formIndex').submit(function (event) {
        $('#actions').append('<input type="hidden" name="objectId" value="' + $('input[name="objectList"]').val() + '" />');
        $('#actions').append('<input type="hidden" name="choice" value="create" />');
    });
});

我想知道是否可以在提交调用中将这些隐藏输入的值作为一组参数传递，就像您可以使用 $.get、$.post 和 $.ajax 函数一样。我已经尝试过，但似乎还没有找到正确的公式。

感谢您的帮助！

【问题讨论】：

您是在寻找 ajax 解决方案还是同步提交？
在这种情况下，我正在寻找同步。我想提交然后重定向到另一个页面。

标签： jquery

【解决方案1】：

如果您只需要将表单中的数据提交到后端，您可以使用 jquery的serialize()函数。

用法：

      $('form').submit(function() {
         var yourdata = $(this).serialize();
        $.ajax({
                type: "POST",
                 url: "check.php",
                data: yourdata,
             success: function(msg){
                      alert( "Data Saved: " + msg );
               }
           });
      });

【讨论】：

这是异步的，他在找同步的

【解决方案2】：

我认为您通过添加隐藏输入参数走在正确的轨道上。我不知道有任何其他方式可以将数据附加到您的非 ajax 表单提交中。

不过，您可能想要更改代码的一些内容：

使用 jquery (as seen here on SO) 构建您的隐藏输入

var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla"); $('#form1').append($(input));
为了获得更好的性能，请使用 delegate() 而不是 live()。性能优势实际上取决于您的 DOM 有多深。但是，委托支持在 live 不支持的地方进行链接。（在 jquery 1.7 中，所有这些问题都通过 on() 方法消失了......）：

$('body').delegate('#btnCreate', 'click', function () { ... });

请注意，不要使用 body 作为容器元素，您可以使用 DOM 中较低的东西来包装您的 btnCreate 元素。

【讨论】：