javascript - PHP AJAX POST 多个同名

Question

我有这样的代码:

<form method="post"  id="result-image" name="result-image" action="" >

            <?php $i=1;  foreach ($data as $key => $datas) {  ?>

<div class="col-md-2 thumb custom-size col-lg-3 col-xs-4">
       <label class="btn btn-default turunin " >
<img class="thumbnail img-responsive img-check" src="<?php echo $datas['thumbnail'];?>" alt="<?php echo $datas['image_alt'];?>" title="<?php echo $datas['title']; ?>">

            <div class="caption" style="text-align:center; margin-top:-15px; padding-bottom:0px;"><?php echo $datas['size'];?></div>
            <input type="checkbox" name="cek[]" id="cek" class="hidden" value="<?php echo $i ?>" autocomplete="off"  >
            <input type="hidden" name="image[]" id="image[]" value="<?php echo $datas['image'] ?>" />
            <input type="hidden" name="page[]" id="page[]" value="<?php echo $datas['page'] ?>" />
            <input type="hidden" name="size[]" id="size[]" value="<?php echo $datas['size'] ?>" />
            <input type="hidden" name="thumbnail[]" id="thumbnail[]" value="<?php echo $datas['thumbnail'] ?>" />
            <input type="hidden" name="image_alt[]" id="image_alt[]" value="<?php echo $datas['image_alt'] ?>" />
            <input type="hidden" name="title[]" id="title[]" value="<?php echo $datas['title'] ?>" />

    </label>
</div>
            <?php $i++; } ?>

<button type="submit" id="edit_submit" class="btn btn-success edit_submit">Next Step <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</form>

然后我想通过 AJAX 进行 POST，这是我的小 javascript:

jQuery(document).ready(function($) {
    $('#result-image').submit(function(e) {
     e.preventDefault();
    data = { action     : 'aad_edit_results',

            //////////// WHAT I SHOULD WRITE /////

     // image       : $("#image").val(), /// This work if one
    // page : $("#page").val(),  /// This work if one
    // size     : $("#size").val(), /// This work if one
    // title        : $("#title").val(), /// This work if one


            //////////// WHAT I SHOULD WRITE /////


             beforeSend : function(){
                $('#myPleaseWait').modal('show');
                //$('.edit_submit').attr('disabled',true);
            },
     };

    $.post(ajaxurl, data, function(response) {
            $("#edit-image-modal").html(response).modal();
            $('#myPleaseWait').modal('hide');
            //$('#edit_submit').attr('disabled',false);
        });

    return false;


                        });
});

如何更改此代码，因为它仅在使用单个名称时才有效？

 // image       : $("#image").val(), /// This work if one
// page : $("#page").val(),  /// This work if one
// size     : $("#size").val(), /// This work if one
// title        : $("#title").val(), /// This work if one

我尝试了更多概念，但它们不起作用，有人可以帮助我吗？

Answer 1

我想这会对你有帮助。 Convert form data to JavaScript object with jQuery您可以使用 ajax 发送转换后的数据，但如果您只想将已检查的元素发送到 ajax，则可以使用它。

    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    // you can also change it to $('#result-image').submit(function(){});
    $("#edit_submit").on({ 

        click: function (e) {
            e.preventDefault();
            var form = $('#result-image'),
                data = form.serializeObject(),
                checkbox = form.find('input[type=checkbox]:checked'),
                sendAjaxData = [];

            $.each(checkbox, function (i, k) {
                sendAjaxData[i] = {
                    image: data['image[]'][k.value - 1], // why -1? because of your checkbox value starts from 1, but `i` starts from 0
                    page: data['page[]'][k.value - 1],
                    // ...... write your other inputs
                };
            });

            console.log(sendAjaxData); // send to ajax `sendAjaxData`
            // .. ajax request goes here.

            $.ajax({
                    url: "sendRequest.php",
                    method: "POST",
                    data: {data:sendAjaxData},
                    dataType: "json", // if you want to get object data use json, but you want to get text data then use html
                    success: function (data) {

                    },
                    error: function (data) {

                    }
                });

            return false;
        }

    });

PHP 文件 sendRequest.php

<?php

print_r($_POST);
//also you can get with $_POST["data"];

希望对你有帮助。