jQuery拦截表单提交到参数字符串

Posted 2023-02-24

【中文标题】jQuery拦截表单提交到参数字符串

【英文标题】：jQuery intercept form submission to param string

【发布时间】：2011-06-15 19:22:09

【问题描述】：

我有一个表格。此表单通过 POST 提交到 iframe，而 iframe 依次处理请求，并根据结果执行 javascript，根据提交的有效性更改父级的内容。

现在，我不喜欢这个程序。我希望能够同时提交多个表单，但我只有一个隐藏的 iframe。所以我想用 AJAX 来做，为每个表单提交创建一个单独的请求。

但是，我的表格很复杂；它包含向数组添加变量的复选框、被点击的图像以及我需要发送其点击坐标的复选框，以及类似的复杂内容——这就是为什么我不计算每个输入的值并将其添加到 post 参数的原因字符串（顺便说一句：我不知道如何以这种方式创建数组），我更愿意截取提交内容，保存为带有所有这些参数的帖子字符串，然后将此字符串用于 AJAX POST 请求。

我想在这个函数中做的事情：

$('#myForm').submit(function(event)

    // process the submission, e. g. event.getContent().toPostString();

    // create the AJAX request and send it and attach listeners (I know how to do this line ;)

    return false; // I don't want the form submitted (to the iframe)

);

提前致谢！

【参考方案1】：

不要使用 iframe，只需使用jQuery's ajax methods：（我在下面的示例中使用了post()）

$('#myForm').submit(function(event)

             //url          //post data
    $.post(this.action, $(this).serialize(), function(returnData)
           //do something with returnData
    )

    return false; //do not submit form the normal way

);

这是一个例子：http://jsfiddle.net/maniator/Y6r8E/ 在表单中输入内容并提交。

【讨论】：

完美！惊人的！哇，正是我需要的！

除了一件事，我只是注意到了。如果使用图片作为提交按钮，则点击位置（不会那么糟糕），甚至点击的图片（如果使用多张图片作为潜在的提交按钮）都不会通过。

@arik 是表格吗？表格中的任何内容都会通过。只需输出$(this).serialize() 即可检查

嗯，它是形式，或者至少，它应该是。但是，如前所述，它没有通过:(（我检查过，它也不在表单的序列化中）。但没关系，我只是觉得值得一提；）

@arik -- 好的。您总是可以通过在序列化后附加 +'&param=somevalue&param2=somevalue' 来添加更多参数

【参考方案2】：

jQuery 的serialize() 函数将为您收集表单数据，以便通过 .ajax() 或 .post() 轻松提交表单。