Question

我正在尝试使用jquery serialize将ajax post请求中的表单中的某些值传递给我的服务器，但是serialize函数返回一个充满空值的数组，这些值不是序列化的。我不明白为什么值不是序列化的，我添加了相关的代码，这里希望有人有个想法：

<div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">
            <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>
                    <h3 class="modal-title">Contact Form</h3>
                </div>
                <div class="modal-body form">
                    <form action="#" id="form" class="form-horizontal">
                        <input type="hidden" value="" name="id"/>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">first name</label>
                                <div class="col-md-9">
                                    <input name="first_name" placeholder="first name" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">last name</label>
                                <div class="col-md-9">
                                  <input name="last_name" placeholder="last name" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">phone</label>
                                <div class="col-md-9">
                                    <input name="phone" placeholder="phone" class="form-control" type="text"> 
                                </div>
                            </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3">email</label>
                                    <div class="col-md-9">
                                            <input name="email" placeholder="email" class="form-control" type="text">
                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<script type="text/javascript">
        $(document).ready( function () {
            $('#table_id').DataTable();
        } );
        var save_method; //for save method string
        var table;


        function add_contact()
        {
            save_method = 'add';
            $('#form')[0].reset(); // reset form on modals
            $('#modal_form').modal('show'); // show bootstrap modal
            //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
        }

        function edit_contact(id)
        {
            save_method = 'update';
            $('#form')[0].reset(); // reset form on modals

            //Ajax Load data from ajax
            $.ajax({
                url : "<?php echo site_url('index.php/contacts/ajax_edit/')?>/" + id,
                type: "GET",
                dataType: "JSON",
                success: function(data)
                {
                    console.log(data);
                    $('[name="id"]').val(data.id);
                    $('[name="first_name"]').val(data.first_name);
                    $('[name="last_name"]').val(data.last_name);
                    $('[name="phone"]').val(data.phone);
                    $('[name="email"]').val(data.email);


                    $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                    $('.modal-title').text('Edit Contact'); // Set title to Bootstrap modal title

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error get data from ajax');
                }
            });
        }

        function save()
        {
            var url;
            if(save_method == 'add')
            {
                url = "<?php echo site_url('contacts/contact_add')?>";
            }
            else
            {
              url = "<?php echo site_url('contacts/contact_update')?>";
            }

            // ajax adding data to database
            $.ajax({
                url : url,
                type: "POST",
                data: $("#form").serialize(),
                dataType: "JSON",
                contentType: 'application/json; charset=utf-8',
                success: function(data)
                {
                    console.log(data);
                    e.preventDefault();
                    //if success close modal and reload ajax table
                    $('#modal_form').modal('hide');
                    location.reload();// for reload a page
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    console.log(errorThrown);
                    alert('Error adding / update data');
                }
            });
        }

        function delete_contact(id)
        {
            if(confirm('Are you sure delete this data?'))
            {
            // ajax delete data from database
                $.ajax({
                    url : "<?php echo site_url('index.php/contacts/contact_delete')?>/"+id,
                    type: "POST",
                    dataType: "JSON",
                    success: function(data)
                    {

                       location.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        alert('Error deleting data');
                    }
                });
            }
        }

    </script>

Answer 1

.serialize()不会生成它生成的application/x-www-form-urlencoded的JSON。将内容类型设置为JSON是错误的，不要设置内容类型，jQuery会将其设置为application/x-www-form-urlencoded。

        $.ajax({
            url : url,
            type: "POST",
            data: $("#form").serialize(),
            dataType: "JSON",
            // remove contentType: 'application/json; charset=utf-8',
            success: function(data)
            {
                console.log(data);
                //e.preventDefault();
                //if success close modal and reload ajax table
                $('#modal_form').modal('hide');
                location.reload();// for reload a page
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                console.log(errorThrown);
                alert('Error adding / update data');
            }
        });

另外，我不知道你在成功处理程序中所期望的e.preventDefault();，但它肯定不会这样做。

jquery序列化产生一个空数组

1 个答案: