如何提交表單並將一些額外的參數傳遞給$ .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
});

但它看起來並不優雅。 這是正確的方法，還是有更好的方法呢？

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

Answer 2

制作Ajax帖子以將數據發送到服務器。 檢索后端代碼中的參數數據以及表單數據。

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