方式一: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>
自定义格式,处理成一个JSON格式数据,打印结果: {username: "name", password: "123"}