jQuery:serialize()表单和其他参数


113

是否可以通过单个AJAX请求发送表单元素(使用.serialize()方法序列化)和其他参数?

例:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
        par1 : 1,
        par2 : '2',
        par3: 232
    }
}

如果不是,将表单与其他参数一起提交的最佳方法是什么?

谢谢

Answers:


235

serialize() 有效地将表单值转换为有效的查询字符串,因此您只需将其附加到字符串即可:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}

7
@Falcon你在这里椰子是什么意思?
Shafizadeh's

我如何将1更改为变量
Slatan-ko,2016年

3
@Shafizadeh它的押韵(很多-椰子)
亚当

你能告诉我为什么这里不需要contentType吗?是默认添加的吗?
kernal lora,2016年

是的,默认的表单URL编码。查看更多信息jQuery的文档
罗里McCrossan

77

另外form.serialize()$.param(object)如果将参数存储在某个对象变量中,则可以使用with 。用法是:

var data = form.serialize() + '&' + $.param(object)

有关更多参考,请参见http://api.jquery.com/jQuery.param


10
我喜欢这一个。这意味着我不必看一个丑陋的查询字符串!
格雷格·伍兹

4
到目前为止,这是更好的方法。可接受的答案是混乱的,绝不能在任何生产应用程序中使用。
FastTrack

3
如果我们在谈论生产环境,则不应使用这些答案。本form应包含的所有信息(隐藏字段如有必要),以便它可以在一个单一的呼叫被序列化。这样,如果JS被禁用或失败,则表单提交仍应具有故障保护功能,并在发送时包括所有数据。
罗里·麦克罗斯桑

9

我不知道,但是以上都不对我有用,然后我用了它,它起作用了:

在表单的序列化数组中,将其存储为键值对

我们将新的一个或多个值推送到此处的形式变量中,然后就可以直接传递该变量了。

var form = $('form.sigPad').serializeArray();
var uniquekey = {
      name: "uniquekey",
      value: $('#UniqueKey').val()
};
form.push(uniquekey);

1

如果您要发送带有序列化表格的数据,则可以尝试此操作

var form= $("#formId");
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()+"&variable="+otherData,
    success: function (data) {
    var result=data;
    $('#result').attr("value",result);

    }
});

0

这样传递参数值

data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"

等等。


0

按照Rory McCrossan的回答,如果要发送整数数组(几乎是.NET),则代码如下:

// ...

url: "MyUrl",       //  For example --> @Url.Action("Method", "Controller")
method: "post",
traditional: true,  
data: 
    $('#myForm').serialize() +
    "&param1="xxx" +
    "&param2="33" +
    "&" + $.param({ paramArray: ["1","2","3"]}, true)
,             

// ...

-1

您可以使用jQuery创建具有其他表单内容的辅助表单,然后将该表单添加到其他参数中,因此您只需要在ajax调用中序列化即可。

function createInput(name,value){
    return $('<input>').attr({
        name: name,
        value: value
    });
}
$form = $("<form></form>");
$form.append($("#your_form input").clone());
$form.append(createInput('input_name', 'input_value'));
$form.append(createInput('input_name_2', 'input_value_2'));
....

$.ajax({
    type : 'POST',
    url : 'url',
    data : $form.serialize()
}

-1

我用声明不足解决问题;使用url相同的GET方法发送数据

$.ajax({
    url: 'includes/get_ajax_function.php?value=jack&id='+id,
    type: 'post',
    data: $('#b-info1').serializeArray(),

并通过$_REQUEST['value']OR 获得价值$_GET['id']


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.