将复杂Form表单序列化插件serialize-object.js jQuery

将复杂Form表单序列化插件serialize-object.js jQuery,20210910143122.jpg,第1张

jQuery有个方法$.fn.serialize,可将表单序列化成字符串;还有个方法$.fn.serializeArray,可将表单序列化成数组。那如果要将表单序列化成对象或者JSON格式数据,该如何操作呢?

<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>
细心的朋友会发现,我把每个表单元素命名成如name="user[email]"这样的格式,这么做就是为了好序列化成json或object。别着急,来看jQuery调用代码。

jQuery
首先载入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>
当我们填写完表单后,点击提交按钮,整个表单元素被序列化成JSON数据,然后通过post异步提交给了post.php处理,来看代码:

$(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":"的撒的\r\n天654\r\n第三方"}}
得到的是一个json格式的数据,看起来是不是很爽了。

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

var obj_data = $('#myform').serializeObject();
PHP
前端将表单数据序列化成json格式的数据了,而且通过Ajax一次性POST给到PHP,那么PHP该怎么获取这些表单数据呢?由于前端post过程属于原生的数据post,PHP不能通过$_POST[]来接收表单数据,而要通过php://input来接收post数据。关于PHP如何接收post数据,可以参考本站文章:PHP接收POST数据方式。

$data = file_get_contents('php://input'); 
print_r(json_decode($data, true));
PHP接收到post数据后,可以将其转成数组就可以很好的操作数组了。

更多有关表单数据序列化的内容,请参考jQuery Serialize Object项目github地

转载请说明出处
UE资源网 » 将复杂Form表单序列化插件serialize-object.js jQuery

发表评论

欢迎 访客 发表评论

成为会员可下载全站资源!

查看演示 官网购买