如何提交表单并将一些额外的参数传递给$ .getJSON回调方法?

时间:2015-09-24 22:17:12

标签: javascript jquery json

我知道如何将一些参数传递给JQuery $ .getJSON回调方法,thanks to this question

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

但它看起来并不优雅。这是正确的方法,还是有更好的方法呢?

2 个答案:

答案 0 :(得分:2)

我们可以将功能demonstrated in this answer实现为自定义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
});

答案 1 :(得分:0)

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