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 属性。