jQuery - The serialize function

serialize方法可以将form表单待提交的内容序列化为一个对象,jQuery官方文档有如下描述:

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $( “input, textarea, select” ).serialize();
<div id="demo-edit-dialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Project</h4>
            </div>
            <div class="modal-body">
                <form id="demo-edit-form" action='/demo/edit-project' method='post'>
                    <input id="project-id" type="hidden" value="PRJ-DEMO-001">
                    <div class="form-group">
                        <label for="project_name">Project Name</label>
                        <input class="form-control" name="project_name" type="text" value="">
                    </div>
                    <div class="form-group">
                        <label for="project_desc">Description</label>
                        <input class="form-control" name="project_desc" type="text" value="">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary modal-submit">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    function show_edit_dialog(demoObject) {
        $('#demo-edit-dialog').modal('show')
        if (typeof (demoObject) !== undefined) {
            if (typeof (demoObject.name) !== undefined) {
                $('#demo-edit-dialog [name=project_name]').val(demoObject.name);
            }
            if (typeof (demoObject.desc) !== undefined) {
                $('#demo-edit-dialog [name=project_desc]').val(demoObject.desc);
            }
        }
    }
    
    $(function () {
        $('#demo-edit-dialog').on('click', '.modal-submit', function (e) {
            $('#demo-edit-dialog').modal('hide');
            var form = $('#demo-edit-form');
            var url = form.attr('action');
            var data = form.serialize();
            var location = window.location;
            $.ajax({
                type: 'post',
                url: url,
                data: data,
                success: function (data) {
                    showMessageDlg('Ok', 'Action is done successfully!', { refreshURL: location });
                },
                error: function (data) {
                    showMessageDlg('Error', 'Failed: ' + decodeURI(data.statusText));
                }
            });
        })
    })    
</script>
Live Demo »