序列化()表单和其他参数

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

例如:

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

如果没有，那么提交表单和其他参数的最佳方式是什么？

谢谢

326886 次浏览
小开
最佳答案

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

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

或者，如果将参数存储在某个对象变量中，则可以将 form.serialize()与 $.param(object)一起使用。用途如下:

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

请参阅 http://api.jquery.com/jQuery.param以获得进一步的参考。

小开

我不知道，但是以上这些对我都不管用，然后我用了这个，它起作用了:

在表单的序列化数组中，它作为键值对存储

我们在表单变量中推送新的值，然后现在可以直接传递这个变量。

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

您可以使用 jQuery 创建一个带有另一个表单内容的辅助表单，然后添加 thath form 其他参数，这样您只需要在 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()
}
小开

我用低调来解决问题; 使用 URL 同一 GET 方法发送数据

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

使用 $_REQUEST['value']或 $_GET['id']获取值

小开

如果要用表单序列化发送数据，可以尝试这样做

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


}
});
小开

还可以使用 seralizeArray 函数执行同样的操作。

小开

像这样传递参数值

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

诸如此类。

小开

按照 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)
,


// ...
小开

在 js 中编码:

  var temp =    $("#pay_property_amount").serialize();
temp = btoa(temp);

然后传给 Ajex

 data: { temp_data : temp },

用 php 解码

    $temp_data = base64_decode($this->input->post('temp_data'));


if($temp_data){
$temp_data = $this->unserializeForm($temp_data);
}




function unserializeForm($str) {
$returndata = array();
$strArray = explode("&", $str);
$i = 0;
foreach ($strArray as $item) {
$array = explode("=", $item);
    

if (preg_match('/(%5B%5D)/', $array[0])) {
$array[0] = str_replace('%5B%5D','',$array[0]);
if(array_key_exists($array[0],$returndata)){
$returndata[$array[0]][]=$array[1];
}else{
$returndata[$array[0]] =array();
$returndata[$array[0]][]=$array[1];
}
}else
{
$returndata[$array[0]] = $array[1];
}
    

    

}


return $returndata;
}
小开 
$("#add_form").submit(function(e) {
e.preventDefault();
var total_qty = $('#total_qty').text();
var total_amt = $('#total_amt').text();
       

$("#add_btn").val('adding....');
$.ajax({
url: 'action.php',
method: 'post',
data: $(this).serialize() + "&total_qty="+total_qty + "&total_amt="+total_amt,
success: function(data){
console.log(data);
}
});
});
小开

希望向窗体数据添加新数据的用户可以使用此方法。 例如:

$("form#myForm").submit(function(e){
e.preventDefault();
let formData = jQuery("#myForm").serializeArray();
let newData = [
{name:"city", value: "Ankara"},
{name:"jobs", value: "Full-Stack Web Developer"},
{name:"action", value: "ajax_proccess"}
];
let postData = formData.concat(newData);


console.log(formData);
console.log(newData);
console.log(postData);


jQuery(".alert").text("İş: " + postData[4]['value']);
    

jQuery.ajax({
url: jQuery("#myForm").attr('action'),
type: 'POST',
dataType: 'json',
data: postData,
success: function(data) {
//let response = JSON.parse(data);
console.log(data);
alert('Submitted.');
jQuery(".alert").text(newData[5]);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="" id="myForm">
<input type="hidden" name="name" value="Mahmut Yüksel">
<input type="hidden" name="surname" value="Mert">
<input type="hidden" name="countary" value="Turkey">
<input type="submit" value="Gönder">
</form>
<div class="alert">İş: </div>


提交答案