如何使用jQuery序列化自定义对象变量并用于AJAX请求？

嘿，我来帮你搞定这个问题！首先得明确一点：jQuery的serialize()方法是专门用来序列化表单元素集合（比如$('form')或者$('input, select')这类jQuery对象）的，直接给普通JS对象调用这个方法是行不通的。不过没关系，我们有两种方式可以达到和serialize()一样的效果，把你的自定义对象转成适合POST请求的编码字符串。

方法一：用$.param()直接序列化对象（推荐） #

$.param()是jQuery内部处理表单序列化的核心方法，它可以直接把JS对象转换成URL编码的查询字符串，和serialize()输出的格式完全一致。这是最简单高效的方式，直接修改你的AJAX代码就行：

var type = { 
    op:"add", 
    id_user : <?=$u->id?>, 
    tipo : tipo, 
    description : $("#desc_new_param").val() 
};

$.ajax({
    type: "POST",
    cache: false,
    url: "<?=SYSTEM_WEB_ADMIN?>second.php",
    data: $.param(type), // 用$.param序列化对象，效果等同于表单serialize
    contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 可选，但明确设置更稳妥
    success: function(data) { 
        $("#tab-"+tipo).html(data); 
    }
});

修改后，AJAX请求会把对象转换成和表单序列化一致格式的数据发送，后端可以用常规方式获取这些参数。

方法二：创建临时表单再用serialize()（满足你想用serialize的需求） #

如果你一定要用到serialize()方法本身，可以动态创建一个隐藏的临时表单，把对象的键值对作为隐藏输入项添加进去，再序列化这个表单。代码如下：

var type = { 
    op:"add", 
    id_user : <?=$u->id?>, 
    tipo : tipo, 
    description : $("#desc_new_param").val() 
};

// 创建临时隐藏表单
var $tempForm = $('<form style="display:none;"></form>');
// 遍历对象，把每个键值对转为隐藏输入框
$.each(type, function(key, value) {
    $tempForm.append($('<input>').attr({
        type: 'hidden',
        name: key,
        value: value
    }));
});
// 序列化表单
var serializedData = $tempForm.serialize();
// 移除临时表单，避免DOM冗余
$tempForm.remove();

$.ajax({
    type: "POST",
    cache: false,
    url: "<?=SYSTEM_WEB_ADMIN?>second.php",
    data: serializedData,
    success: function(data) { 
        $("#tab-"+tipo).html(data); 
    }
});

不过说实话，这种方法有点多此一举，$.param()已经能直接实现相同效果，而且代码更简洁。

总结 #

优先选择方法一，用$.param()直接序列化自定义对象，这是最符合jQuery设计思路且高效的方式。方法二只是为了满足你“使用serialize方法”的字面需求，实际项目里很少这么用。

内容的提问来源于stack exchange，提问作者Jhonny