美文网首页
jquery之获取form表单数据的两种方式,提交方式为post

jquery之获取form表单数据的两种方式,提交方式为post

作者: 刘小刀tina | 来源:发表于2020-02-11 13:25 被阅读0次
 <form action="">
        <input type="text" name="name" value="freely"><br>
        <input type="text" name="age" value="20"><br>
        <input type="text" name="city" value="beijing"><br>
        <input type="text" name="job" value="fe"><br>
    </form>
    <button id="serialize">send</button
$(document).ready(function() {
            $('#serialize').on('click', function() {
                // 方法一 serialize
                var str = $('form').serialize();
                getObj(str);
                // 得到序列化字符串
                // name=freely&age=20&city=beijing&job=fe
                // 方法二 serializeArray
                var arr = $('form').serializeArray();
                // 得到数组对象
                /*
                    0: {name: "name", value: "freely"}
                    1: {name: "age", value: "20"}
                    2: {name: "city", value: "beijing"}
                    3: {name: "job", value: "fe"}
                */
                // 遍历数组得到 {name: 'freely', age: 20}数据格式
                // 使用jquery方法 $.each方法
                var tempObj = {};
                $.each(arr, function(i, obj) {
                    tempObj[obj.name] = obj.value;
                });
                console.log(tempObj); // {name: "freely", age: "20", city: "beijing", job: "fe"}
            });
        });
 
        function getObj(str) {
            let arr = str.split('&');
            let obj = {};
            arr.map(function(item) {
                let tempArr = item.split('=');
                obj[tempArr[0]] = tempArr[1];
            });
            console.log(obj); // {name: "freely", age: "20", city: "beijing", job: "fe"}

相关文章