JQuery表单序列化

article/2025/11/9 2:44:45

方式一：serialize()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="test1">username: <input type="text" name="username">password: <input type="password" name="password"><button id="submit">submit</button>
</form>
</body>
<script>
$('#submit').click(function () {console.log($('#test1').serialize());return false;
});
</script>
</html>

把表单信息序列化成一个字符串，结果是一串字符串： username=name&password=123

方式二：serializeArray()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="test1">username: <input type="text" name="username"><br>password: <input type="password" name="password"><br><button id="submit">submit</button>
</form>
</body>
<script>$('#submit').click(function () {console.log($('#test1').serializeArray());return false;
});
</script>
</html>

把表单信息序列化成一个JSON数组对象，结果是一个json数组对象：

[{"name":"username","value":"name"},{"name":"password","value":"123"}]

方式三：自定义serializeObject()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="test1">username: <input type="text" name="username"><br>password: <input type="password" name="password"><br><button id="submit">submit</button>
</form>
</body>
<script>// 自定义方法jQuery.prototype.serializeObject=function(){var obj=new Object();$.each(this.serializeArray(),function(index,param){if(!(param.name in obj)){obj[param.name]=param.value;}});return obj;};$('#submit').click(function () {console.log(($('#test1').serializeObject()));return false;
});
</script>
</html>