<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":"的撒的\r\n天654\r\n第三方"}}

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

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

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

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

form表单序列化serialize-object.js的更多相关文章

  1. form 表单序列化 serialize

    在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化. jquery提供的serialize方法能够实现. $("#searchForm").seriali ...

  2. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  3. form表单序列化数据之后,追加额外数据

    form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...

  4. jquery ajax(5)form表单序列化

    form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...

  5. 原生JS实现表单序列化serialize()

    有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...

  6. js将form表单序列化[json字符串、数组、对象]

    1.序列化为字符串 $("#Form").serialize();//name=zhangsan&sex=1&age=20   2.序列化为数组 var formD ...

  7. jQuery实现form表单序列化转换为json对象功能示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 提交Form表单,submit之前做js判断处理

    效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...

  9. 将复杂form表单序列化serialize-object.js

    <form class="form-horizontal" role="form" id="myform" action=" ...

随机推荐

  1. Python3:pyecharts数据可视化插件

    Python3:pyecharts数据可视化插件 一.简介 pyecharts 是一个用于生成 Echarts 图表的类库. Echarts 是百度开源的一个数据可视化 JS 库.主要用于数据可视化. ...

  2. Javaworkers团队第四周项目总结

    本周项目进展 本周是我们的项目开发的第四周,在之前的一周,我们小组在合作的情况下基本完成了项目代码的框架编写,我们组的项目课题,小游戏--贪吃蛇以及可以运行,可以进行简单的游戏,但是我们在思考之后发现 ...

  3. git基本配置及使用

    目录 设置git git remote git-flow git merge 与 git rebase 参考 Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要S ...

  4. 用PHP开发命令行工具

    介绍 用过laravel开发过项目的都应该用过artisan,通过artisan我们可以在命令行中创建控制器类,Eloquent类等,今天我们将通过php来开发命令行工具 开发环境与工具 使用vagr ...

  5. python输出日期时间

    import datetime base = datetime.datetime.today() , ): print(base + datetime.timedelta(days=x))

  6. 《Blue Flke团队》第二次作业通讯录项目开题报告

      Just_Do_IT! N:8A:8B:7C:6D:8总分:37   Miracle-House N:8A:6B:7C:6D:8总分:35   Spring_Four N:7A:7B:8C:8D: ...

  7. 关闭pm2

    先查找ID pm2 status 然后 pm2 stop id pm2 delete id

  8. 递归--练习6--noi1755菲波那契数列

    递归--练习6--noi1755菲波那契数列 一.心得 二.题目 1755:菲波那契数列 总时间限制:  1000ms 内存限制:  65536kB 描述 菲波那契数列是指这样的数列: 数列的第一个和 ...

  9. Idea2018激活

    [help]-->[register]-->[license server]-->输入下方链接 http://xdouble.cn:8888/ 如果不行,请用下面的这个: http: ...

  10. OAF TABLE中第一列添加事件不生效

    我遇到一个比较诡异的现象 在TABLE中,我在TABLE的第一列添加了一个MessageCheckBox,并为其设置全局刷新的FireAction事件selection, 但是点击勾选框按钮之后,事件 ...