form表单序列化json对象

html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="./html.js"></script>
    </head>
    <body>
        <form id="myform">
            <table>
                <tr>
                    <td>姓名:</td>
                    <td> <input type="text" name="name" /> </td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="1"> 男
                        <input type="radio" name="sex" value="0"> 女
                    </td>
                </tr>
                <tr>
                    <td>年龄:</td>
                    <td>
                        <select name="age">  
                            <option value="20">20</option>  
                            <option value="21">21</option>  
                            <option value="22">22</option>  
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" value="basketball" name="hobby">篮球
                        <input type="checkbox" value="volleyball" name="hobby">排球
                        <input type="checkbox" value="football" name="hobby">足球
                        <input type="checkbox" value="earth" name="hobby">地球
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" id="ajaxBtn" value="提交" />
                    </td>
                </tr>
            </table>
        </form>
    </body>

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
}  

$(function () {
    $("#ajaxBtn").click(function () {
        debugger;
        var params = $("#myform").serializeObject(); //将表单序列化为JSON对象   
        console.info(params);
    })
})

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容