美文网首页
jQuery表单序列化方法serialize(),seriali

jQuery表单序列化方法serialize(),seriali

作者: elileo | 来源:发表于2020-07-07 15:39 被阅读0次

    serialize方法

    serialize方法可以将表单序列化成一个拼接的字符串形式。

        $(".btn2").click(function(){
            var data = $("form").serialize();
            console.log(data);
        })
    

    返回结果

    username1=a&address1=b&age1=c&username2=d&address2=e&age2=f
    

    单纯表单提交,足够使用

    serializeArray方法

    serialize方法可以将表单序列化成一个特殊的json数组,带有name和value的json。

        $(".btn3").click(function(){
            var data = $("form").serializeArray()
            console.log(data);
        })
    

    返回结果

        Array(6)
        0: {name: "username1", value: "a"}
        1: {name: "address1", value: "b"}
        2: {name: "age1", value: "c"}
        3: {name: "username2", value: "d"}
        4: {name: "address2", value: "e"}
        5: {name: "age2", value: "f"}
    

    很显然我们需要处理一下这个数组,才能更好的得到我们想要的数据

    数组处理

        $(".btn3").click(function(){
            var data = $("form").serializeArray()
            var newdata ={}
            data.map(function(val,key){
                newdata[val.name]=val.value;
            })
            console.log(newdata);
        })
    

    返回结果

        {username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}
    

    现在得到我们想要的数据了,可以放心去传递数据了,不过这还没有结束。
      这段代码虽然实现了我们的功能,但似乎不够简洁,我们还需要优化它。

    代码优化

        $(".btn3").click(function(){
            var data ={}
            $("form").serializeArray().map(function(val,key){
                data[val.name]=val.value;
            })
            console.log(data);
        })
    

    返回结果

      {username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}
    

    数据完美获取得到了,代码也进行了优化,最后就可以愉快的把数据传递给后台了。
    ————————————————
    更加详尽信息可查看原文链接:
    https://blog.csdn.net/kelinfeng16/java/article/details/83106220

    相关文章

      网友评论

          本文标题:jQuery表单序列化方法serialize(),seriali

          本文链接:https://www.haomeiwen.com/subject/kfaaqktx.html