美文网首页
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

    serialize方法 serialize方法可以将表单序列化成一个拼接的字符串形式。 返回结果 单纯表单提交,足...

  • jq ajax .serialize()方法

    .serialize() jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们...

  • 易忘记代码记录

    1、C# Split分割字符串的方法使用 2、jQuery序列化表单数据serialize()、serialize...

  • Jquery表单序列化后添加数据

    serialize()、serializeArray()方法都是jquery用户序列化表单的,用于ajax提交的d...

  • 小知识积累

    jQuery 序列化表单数据 serialize() 格式:var data = $("form").serial...

  • FormData多文件上传

    问题:jquery Ajax serialize()表单进行序列化方式上传文件 通过$(‘#example’).s...

  • jQuery ajax()使用serialize()提交form

    jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元...

  • serialize( ) 在Jq和PHP的区别?

    jquery中的serialize( )是将表单数据进行序列化,得到url格式字符串。jquery中没有unser...

  • jquery

    1. jQuery Ajax -serialize():序列化表单 把name和value 序列成 a=1&b=2...

  • serialize

    serialize将表单序列化成字符串 serializeArray将表单序列化成数组 serializeObje...

网友评论

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

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