首页 > 代码库 > 将复杂form表单序列化serialize-object.js
将复杂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 = http://www.mamicode.com/$(‘#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 = http://www.mamicode.com/$(‘#myform‘).serializeObject();
PHP接收到post数据后,可以将其转成数组就可以很好的操作数组了。
更多有关表单数据序列化的内容,请参考jQuery Serialize Object项目github地址:https://github.com/macek/jquery-serialize-object
技术交流QQ群:15129679
将复杂form表单序列化serialize-object.js
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。