JQuery中serialize()实例
- <script type="text/javascript">
- $("#admin-role-save").click(function(){
- alert($("#form-admin-role-add").serialize());
- });
- </script>
这个就是把这个id=form-admin-role-add 的表单内容序列化
这个就是我的一个静态页面form
- <form action="" method="post" class="form form-horizontal"
- id="form-admin-role-add">
- <div class="row cl">
- <label class="form-label col-xs-4 col-sm-3"><span
- class="c-red">*</span>角色名称：</label>
- <div class="formControls col-xs-8 col-sm-9">
- <input type="text" class="input-text" value="" placeholder=""
- id="roles_name" name="roles_name">
- </div>
- </div>
- <div class="row cl">
- <label class="form-label col-xs-4 col-sm-3">备注：</label>
- <div class="formControls col-xs-8 col-sm-9">
- <input type="text" class="input-text" value="" placeholder="" id="roles_mark"
- name="roles_mark">
- </div>
- </div>
- <div class="row cl">
- <label class="form-label col-xs-4 col-sm-3">网站角色：</label>
- <div class="formControls col-xs-8 col-sm-9">
- <dl class="permission-list">
- <dt>
- <label> <input type="checkbox" value=""
- name="user-Character-0" id="user-Character-0"> 资讯管理
- </label>
- </dt>
- <dd>
- <dl class="cl permission-list2">
- <dt>
- <label class=""> <input type="checkbox" value="1"
- name="user_status1" id="user-Character-0-0">
- 栏目管理(状态码1)
- </label>
- </dt>
- </dl>
- <dl class="cl permission-list2">
- <dt>
- <label class=""> <input type="checkbox" value="2"
- name="user_status2" id="user-Character-0-1">
- 文章管理(状态码2)
- </label>
- </dt>
- </dl>
- </dd>
- </dl>
- <dl class="permission-list">
- <dt>
- <label> <input type="checkbox" value=""
- name="user-Character-0" id="user-Character-1"> 用户中心
- </label>
- </dt>
- <dd>
- <dl class="cl permission-list2">
- <dt>
- <label class=""> <input type="checkbox" value="4"
- name="user_status4" id="user-Character-1-0">
- 用户管理(状态码4)
- </label>
- </dt>
- </dl>
- </dd>
- </dl>
- </div>
- </div>
- <div class="row cl">
- <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
- <button type="submit" class="btn btn-success radius"
- id="admin-role-save" name="admin-role-save">
- <i class="icon-ok"></i> 确定
- </button>
- </div>
- </div>
- </form>
然后我在页面中写入内容后让他跳出 上面已经在js里写了alert();
效果如下：
成功显示说明我们代码没问题，这段弹出的字符串就是我们序列化的数据，也是我们需要给后台提交的数据。
详细说明：
为何有很多奇怪的%E8等，因为他自动把中文转义了，作为开发看这个应该不会奇怪。
必须用上JQuery，也是前端的活。
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。
