zoukankan      html  css  js  c++  java
  • jQuery表单序列化

    方法1:serialize(): 就是把表单信息序列化成一个字符串 (最常用 )

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("div").text($("form").serialize());
      });
    });
    </script>
    </head>
    <body>
    <form action="">
    First name: <input type="text" name="FirstName" value="Bill" /><br />
    Last name: <input type="text" name="LastName" value="Gates" /><br />
    </form>
     
    <button>序列化表单值</button>
    <div></div>
    </body>
    </html>

    最终序列化出的结果就是:FirstName=Bill&LastName=Gates 
    这样的一个字符串

    方法2:serializeArray() 
    它返回的是一个json 对象 而不是一个字符串

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        x=$("form").serializeArray();
    var x = JSON.stringify(x)
    document.write(x)
     
      });
    });
    </script>
    </head>
    <body>
    <form action="">
    First name: <input type="text" name="FirstName" value="Bill" /><br />
    Last name: <input type="text" name="LastName" value="Gates" /><br />
    </form>
     
    <button>序列化表单值</button>
    <div id="results"></div>
    </body>
    </html>

    这是最后获取出来的值 [{"name":"FirstName","value":"Bill"},{"name":"LastName","value":"Gates"}]

    方法3:是自己自定义的serializeJson()方法:

    <form> 
        <input type="text" name="username" /> 
        <input type="text" name="password" /> 
    </form> 
     
    <script>
    jQuery.prototype.serializeObject=function(){ 
        var obj=new Object(); 
        $.each(this.serializeArray(),function(index,param){ 
            if(!(param.name in obj)){ 
                obj[param.name]=param.value; 
            } 
        }); 
        return obj; 
    }; 
    </script>

    最后执行 得到的结果如下:

    jQuery("form").serializeObject(); //{username:"",password:""}  
  • 相关阅读:
    查看Linux主机CPU及内存信息
    linux配置java环境变量(详细)
    Linux安装Redis
    Linux关闭防火墙
    使用Unison同步服务器目录
    Nginx详细配置
    CentOS命令行无线上网
    SQL Server查询所有的表名/空间占用量/行数
    CentOS安装Nginx安装详解
    基于 Django 2.0.4 的 djcelery 配置
  • 原文地址:https://www.cnblogs.com/qfdy123/p/11351704.html
Copyright © 2011-2022 走看看