JQuery表单序列化

最新推荐文章于 2023-02-01 18:20:37 发布

小厂程序员DHJ

最新推荐文章于 2023-02-01 18:20:37 发布

阅读量763

点赞数 2

分类专栏： JQuery 前端文章标签： JQuery 序列化表单前端

本文链接：https://blog.csdn.net/qq_41057885/article/details/115841995

版权

前端同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

JQuery

7 篇文章 0 订阅

订阅专栏

方式一：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>