zoukankan      html  css  js  c++  java
  • 将复杂form表单序列化serialize-object.js

    <form class="form-horizontal" role="form" id="myform" action="" method="post"> 
      <div class="form-group"> 
        <label for="email" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
          <input type="email" class="form-control" id="email" name="user[email]" placeholder="Email" value="demo@example.com"> 
        </div> 
      </div> 
      <div class="form-group"> 
        <label for="inputPassword3" class="col-sm-2 control-label">技能</label> 
        <div class="col-sm-10"> 
            <label class="checkbox-inline"> 
              <input type="checkbox" name="user[skill][]" value="html5"> HTML5 
            </label> 
            <label class="checkbox-inline"> 
              <input type="checkbox" name="user[skill][]" value="javascript" checked> Javascript 
            </label> 
            <label class="checkbox-inline"> 
              <input type="checkbox" name="user[skill][]" value="PHP" checked> PHP 
            </label> 
            <label class="checkbox-inline"> 
              <input type="checkbox" name="user[skill][]" value="Python"> Python 
            </label> 
            <label class="checkbox-inline"> 
              <input type="checkbox" name="user[skill][]" value="MySQL" checked> MySQL 
            </label> 
            <label class="checkbox-inline"> 
              <input type="checkbox" name="user[skill][]" value="Redis"> Redis 
            </label> 
        </div> 
      </div> 
      <div class="form-group"> 
        <label for="email" class="col-sm-2 control-label">月薪</label> 
        <div class="col-sm-10"> 
            <select class="form-control" name="user[salary]"> 
              <option value="5000">5000以下</option> 
              <option value="5000-10000">5000-10000</option> 
              <option value="10000-20000">10000-20000</option> 
              <option value="20000">20000以上</option> 
            </select> 
        </div> 
      </div> 
      <div class="form-group"> 
        <label for="email" class="col-sm-2 control-label">自我评价</label> 
        <div class="col-sm-10"> 
            <textarea class="form-control" name="user[intro]" rows="3"></textarea> 
        </div> 
      </div> 
       
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
          <button type="submit" class="btn btn-default" id="subbtn">提交</button> 
        </div> 
      </div>

    首先载入jquery库和jquery.serialize-object.js,在我打包的源码中这两个js文件,其中jQuery是引用的CDN资源。

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="js/jquery.serialize-object.min.js"></script>
    $(function(){ 
        $(document).on('click', '#subbtn', function(event) { 
            event.preventDefault(); 
             
            var json_data = $('#myform').serializeJSON(); 
            $.post('post.php', json_data, function(data) { 
                console.log(data); 
            }); 
        }); 
    });

    上述代码中,我们只需要使用$('#myform').serializeJSON()就可以获得整个表单所有字段的数据,并以json格式序列化,这时post的数据变成以下格式:

    {"user":{"email":"demo@example.com","skill":["html5","javascript","PHP","MySQL"],"salary":"5000","intro":"的撒的
    天654
    第三方"}}

    得到的是一个json格式的数据,看起来是不是很爽了。

    当然jquery.serialize-object.js还提供了一个序列化对象的方法:serializeObject,使用如下代码可以得到一个javascript object对象:

    var obj_data = $('#myform').serializeObject();

    PHP接收到post数据后,可以将其转成数组就可以很好的操作数组了。

    更多有关表单数据序列化的内容,请参考jQuery Serialize Object项目github地址:https://github.com/macek/jquery-serialize-object

    /jquery.serializeJSON

    https://github.com/marioizquierdo/jquery.serializeJSON

    技术交流QQ群:15129679

  • 相关阅读:
    eclipse如何设置多个字符的智能提示
    19.面向对象的三大特征 之封装
    18代码块
    成员变量和局部变量的区别
    类与对象
    Python压缩脚本编辑
    字符串内容
    参考
    序列
    元组
  • 原文地址:https://www.cnblogs.com/yeminglong/p/6166195.html
Copyright © 2011-2022 走看看