点击提交按钮时用Jquery获取表单内容

需求：在点击提交按钮时，用jQuery获取表单的内容，包括姓名密码等信息，并存储在一个json对象中

代码&注释:

<!DOCTYPE html>
<html>
    <head>
        <title>
            test
        </title>
        <script src="jquery-3.5.1.js"></script>
    </head>
    <body>
        <form action="" onsubmit="myFunction()" id="form-test">
            <input type="text" name="name">
            <input type="text" name="email">
            <input type="password" name="password">
            <button type="submit" id="sub">提交</button>
        </form>
    </body>
    <script>
        $('#sub').click(function() {
            // 方法一：
            let json = {};
            json.name = $('#form-test input[name="name"]').val(); // 一个个设置属性和内容
            json.email = $('#form-test input[name="email"]').val();
            json.pwd = $('#form-test input[name="password"]').val();
            json = JSON.stringify(json);
            console.log(json);

            // 方法二： 
            // 当内容较多时推荐使用，使用serializeArray()方法获得表单内容，缺点是不够灵活，表单属性及属性值应当规范
            // let json = {};
            // let arrayForm = $('#form-test').serializeArray();
            // for (x in arrayForm) {
            //     json[arrayForm[x].name] = arrayForm[x].value;
            // } 
            // json = JSON.stringify(json);
            // console.log(json);
        })

        // 也可使用js方法获取
        // function myFunction() {
        //     let json = {};
        //     let arrayForm = $('#form-test').serializeArray();
        //     for (x in arrayForm) {
        //         json[arrayForm[x].name] = arrayForm[x].value;
        //     } 
        //     json = JSON.stringify(json);
        //     console.log(json);
        //     // alert('提交');
        // }
    </script>
</html>

 

posted @ 2020-07-10 17:16  JonnyOu1012  阅读(52)  评论(0)  编辑  收藏  举报