CakePhp使用Ajax提交-表單序列化不起作用

Question

我正在嘗試使用ajax發送帶有序列化表格數據的對象數組。 當我發送序列化數據並將數組添加到ajax數據時，就會出現問題。 序列化的表單數據不會以正確的格式到達控制器。 這是我的ajax：

$('body').on('submit','#RequestPakagesTempAddForm', function(e){

    if (!(productArray.length > 0) || jQuery.isEmptyObject(productArray) ) { 
        alert("Falta agregar productos");
        return false; 
    }

     form = $("#RequestPakagesTempAddForm").serialize();

     $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: {
            'formData': form,
            'productArray': productArray
        },

        success: function(data){
            /*$('.modal').modal('hide');
            $(".success").fadeIn(500).delay(2000).fadeOut(500);*/
            $("#RequestPakagesTempAddForm")[0].reset();
            //Unterminated String constant fixed
            alert("hola");
        }

    });
    event.preventDefault();
    return false;  //stop the actual form post !important!

 });

productArray是我正在創建的要在表單數據內發送的數組。 數組格式在控制器上是正確的，但是序列化的表單數據返回的結果很奇怪。 這是$this->request->data返回的內容：

    Array
(
    [formData] => _method=POST&data%5BRequestPakagesTemp%5D%5Bidentity_id%5D=10&data%5BAddress%5D%5Bexterior_number%5D=22&data%5BAddress%5D%5Binternal_number%5D=0&data%5BAddress%5D%5Bstreet%5D=a&data%5BAddress%5D%5Bsuburby%5D=a&data%5BRequestPakagesTemp%5D%5Btogether%5D=0&data%5BAddress%5D%5Bcountry_id%5D=1&data%5BAddress%5D%5Bstate_id%5D=19&data%5BAddress%5D%5Bcity_id%5D=993&data%5BRequestPakagesTemp%5D%5Bproducts_array%5D=
    [productArray] => Array
        (
            [0] => Array
                (
                    [product_name] => a
                    [product_number] => a
                    [category_name] => a
                    [brand_name] => a
                    [quantity] => a
                    [description] => a
                )

        )

)

我希望將表單數據作為要發送的數組發送。 我的猜測是我正在搞亂序列化Ajax中的數據。 謝謝您的幫助：D

我要提交的表格是這張

<?php
                echo "<div class='row'>";
                echo "<div class='col-lg-4'>";
                echo '<div class="styled-select">';
                echo $this->Form->input('identity_id', array('empty' => 'Elige la Identidad', 'label' => false, 'placeholder' => 'Identidad', 'class' => 'txtBoxRegister'));
                echo '</div>';
                echo "</div>";
                echo "<div class='col-lg-4'>";
                echo $this->Form->input('Address.exterior_number', array( 'label' => false, 'placeholder' => 'Numero Exterior', 'class' => 'txtBoxRegister'));
                echo "</div>";
                echo "<div class='col-lg-4'>";
                echo $this->Form->input('Address.internal_number', array( 'label' => false, 'required' => false, 'placeholder' => 'Número Interior', 'class' => 'txtBoxRegister'));
                echo "</div>";
                echo "</div>";
                echo "<div class='row'>";
                echo "<div class='col-lg-4'>";
                echo $this->Form->input('Address.street', array( 'label' => false, 'placeholder' => 'Calle', 'class' => 'txtBoxRegister'));
                echo "</div>";
                echo "<div class='col-lg-4'>";
                echo $this->Form->input('Address.suburby', array( 'label' => false, 'placeholder' => 'Colonia', 'class' => 'txtBoxRegister'));
                echo "</div>";
                echo "<div class='col-lg-4'>";
                echo "<div data-toggle='tooltip' data-placement='right' title='Tooltip on right'>";
                echo $this->Form->input('together', array('label' => 'Todo Junto', 'class' => 'squaredTwo'));
                echo "</div>";
                echo "</div>";
                echo "</div>";
                echo "<div class='row'>";
                    echo "<div class='col-lg-4'>";
                        echo '<div class="styled-select">';
                        echo $this->Form->input('Address.country_id', array('required' => true, 'empty' => '', 'label' => false, 'class' => 'txtBoxRegister'));
                        echo '</div>';
                    echo "</div>";
                    echo "<div class='col-lg-4'>";
                        echo '<div class="styled-select">';
                        echo $this->Form->input('Address.state_id', array('required' => true, 'empty' => '', 'label' => false, 'class' => 'txtBoxRegister'));
                        echo '</div>';
                    echo "</div>";
                    echo "<div class='col-lg-4'>";
                        echo '<div class="styled-select">';
                        echo $this->Form->input('Address.city_id', array('required' => true, 'empty' => '', 'label' => false, 'class' => 'txtBoxRegister'));
                        echo '</div>';
                    echo "</div>";
                echo "</div>";
                echo $this->Form->input('products_array', array('type' => 'hidden', 'id' => 'product_array'));

            ?>

productArray是一種表單，每次提交時，都會向productArray變量添加一個element（Object）。 表格如下：

<?php
            echo '<div class="row">';
                echo '<div class="col-lg-12" style = "text-align:center;">';
                    echo $this->Form->input('product_name', array( 'label' => false,'required' => true, 'placeholder' => 'Nombre del Producto', 'class' => 'txtBoxRegister'));
                    echo $this->Form->input('product_number', array( 'label' => false, 'required' => false, 'placeholder' => 'Numero del Producto', 'class' => 'txtBoxRegister'));
                    echo $this->Form->input('brand_name', array( 'label' => false, 'required' => true, 'placeholder' => 'Nombre de la Marca', 'class' => 'txtBoxRegister'));
                    echo $this->Form->input('category_name', array( 'label' => false, 'required' => true, 'placeholder' => 'Nombre de la Cateogria', 'class' => 'txtBoxRegister'));
                    echo $this->Form->input('quantity', array( 'label' => false, 'required' => true, 'placeholder' => 'Cantidad del Producto (ejemp. 17 gramos)', 'class' => 'txtBoxRegister', 'id' => 'product_quantity'));
                    echo $this->Form->input('description', array( 'label' => false, 'required' => true, 'placeholder' => 'Descripción', 'class' => 'txtBoxRegister', 'type' => 'textarea', 'style' => 'height: 150px;', 'id' => 'product_description'));
                echo '</div>';
            echo '</div>';
        ?>

這是我將元素添加到數組的js。

$("#productForm").submit(function( event ) {
    //console.log(productArray);
    $('#productBodyTable').append('<tr class="productRow" id="' + $("#product_number").val() +'"> <td class="countId">' + count + '</td> <td>' + $("#product_name").val() + '/' + $("#product_number").val() +'</td> <td>' + $("#brand_name").val() + '</td> <td>' + $("#product_description").val() + '</td> <td>' + $("#product_quantity").val() + '</td> <td> <button type="button" class="btn btn-danger delProduct" id="' + $("#product_number").val() + '" value = "' + countP + '"> <b>-</b> </button> </td> </tr>');
    event.preventDefault();
    var product = { 'product_name': $("#product_name").val(), 'product_number': $("#product_number").val(), 'category_name': $("#category_name").val(), brand_name: $("#brand_name").val(), 'quantity': $("#product_quantity").val(), description: $("#product_description").val()};
    //console.log(product);
    productArray[countP] = product;
    //console.log(productArray);
    count = count + 1;
    countP = countP + 1;    
    $('#createIdentityModal').modal('hide');
    $('#createIdentityModal').find('form')[0].reset();

    $(".delProduct").click(function() {

        delete productArray[$(this).val()];

        $(this).parent().parent().remove();
        //console.log(productArray);

        restartCounter();
    });
});

順便說一句，productArray是一個全局值。

Answer 1

好的，我發現序列化表單存在問題。 該方法正在執行預期的操作。 我只是沒有在控制器端提供格式。 所以我發現在控制器中使用了它：

$FormOne = $this->request->data['formData'];
$FormOneValues = array();
parse_str($FormOne, $FormOneValues);

$this->request->data['formData'] = $FormOneValues['data'];

我可以將所需的格式提供給所獲取的表單數據。 我不明白序列化方法的作用。 通過使用parse_str()我可以使用所需的格式添加表單數據。 如果從視圖角度來看，有一種更簡便的方法，我仍然想聽聽。 我仍在學習使用CakePhp。 希望這對以后的人有所幫助。

Answer 2

好吧，用parse_str（）函數在服務器端解析數據不是最好的方法。 您要做的就是將表單數據不作為字符串而是作為序列化數組傳遞。 您可以使用以下方法進行操作： http : //api.jquery.com/serializearray/

因此，在您的情況下，只需更改：

form = $("#RequestPakagesTempAddForm").serialize();

至

form = $("#RequestPakagesTempAddForm").serializeArray();

或者，如果您要獲取鍵-值對，但最后不帶數字索引：

 var form = { };
 $.each($("#RequestPakagesTempAddForm").serializeArray(),function() {
      form[this.name] = this.value;
 });