如何提交表单并向$.getJSON回调方法传递一些额外参数？

Question

我知道如何向 JQuery $.getJSON 回调方法传递一些参数，这个问题让我明白了：

$.getJSON('/website/json',
{
  action: "read",
  record: "1"
}, 
function(data) {
   // do something
});

我还可以将表单提交到$.getJSON回调方法中：

$.getJSON('/website/json', $(formName)
function(data) {
   // do something
});

但是我想同时传递一些参数和提交一些表单元素。我该如何将这两个东西结合起来呢？

我可以序列化表单元素并手动将一些参数添加到url中，看起来它能正常工作：

$.getJSON('/website/json',
  'action=read&record=1&'
  + $(formName).serialize(),
function(data) {
   // do something
});

但这看起来并不太优雅。这是正确的方法吗？还有更好的方法吗？

- fthiella

---

你可以像这样传递它们：$.getJSON('/website/json', { action: "read", record: 1, .. } - 不确定还能做什么。 - tymeJV

为什么不直接将要传递的参数作为表单元素的一部分，例如隐藏输入元素？ - Neil S

Answer 1

我们可以将此答案中演示的功能实现为一个自定义的jQuery实例方法，该方法从表单中生成键/值对的对象，并将其与不从表单派生的属性组合：

$.fn.formObject = function (obj) {
    obj = obj || {};
    $.each(this.serializeArray(), function (_, kv) {
        obj[kv.name] = kv.value;
    });
    return obj;
};

$.getJSON('/website/json', $(formName).formObject({
    action: "read",
    record: "1"
}), function(data) {
   // do something
});

- sdgluck

---

我在$.each后面添加了return obj;，现在它可以工作了。这是一个有趣的解决方案。 - fthiella

Answer 2

使用Ajax post方法将数据发送到服务器。在后端代码中检索参数数据以及表单数据。

var formData = {data from form};

formData.action = 'read';
formData.post = '1';

$.ajax({
  url: '/website/json',
  type: "post",
  data: formData
}).done(function (data) {
    // remove prior values set upon request response

    formData.action = null;
    formData.post = null;
});

- deek

---

{data from form}是什么？那不是合法的JavaScript。 - sdgluck

@sdgluck 就像一个占位符，“在这里放置你想要的选择器”，我很快就会测试两个答案，然后给你反馈.. 谢谢 :) - fthiella

@deek 我喜欢这种方法，但是我无法让它工作。Ajax post没问题，但是"action"和"post"似乎没有发送到服务器。我做错了什么吗？ - fthiella

@fthiella 你是怎么调用数据的？是用data.action吗？试试用data.formData.action。另外，可能是因为ajax请求在新属性被添加之前就已经完成了。你可以使用promise来设置这些值（或者使用Jquery的ajax beforeSend）。action和post的返回值是null还是undefined呢？ - deek