Question

我正在处理一个页面，一旦点击一个按钮，就必须将表单的信息添加到div中。

HTML

<form id="ajout_checkboxForm" method="post" enctype="multipart/form-data">
    <div id="formulaireCheckbox">
        <table>
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <td>Option</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="new_checkbox[]" disabled="disabled" /></td>
                    <td><input type="text" name="new_checkboxName[]" /></td>
                    <td><input type="button" value="Add Row" onClick="ajouterCheckbox(this.form);" /></td>
                </tr>
            </tbody>
        </table>
    </div>

    <p><input type="button" id="new_checkboxForm" value="<?=AJOUTER_FORMULAIRE;?>"></p>
</form>

<div id="formulaire_appercu">
    <!-- data from form comes here -->
</div>

AJAX

var rowNum = 0;
function ajouterCheckbox(frm)
{
    rowNum++;
    var row = '<tr><td><input type="checkbox" name="new_checkbox[]" disabled="disabled" /></td><td><input type="text" name="new_checkboxName[]" /></td><td><input onClick="addRow(this.form);" type="button" value="<?=AJOUTER;?>" /></td></tr>';
    $('#formulaireCheckbox tbody').append(row);frm.add_qty.value='';frm.add_name.value='';
}

$('#new_checkboxForm').click(function(){
    /*+----------------------------------------------------+
      + This is where the problem is                       +
      + --> I am having trouble getting the information    +
      +     to show in #formulaire_appercu in a way        +
      +     where I can actually do something with it      +
      +----------------------------------------------------+*/

    var update = function() {
        $('#formulaire_appercu').text(
            JSON.stringify($('#ajout_checkboxForm').serialize())
        );
    };
    update();
    $('#ajout_checkboxForm').change(update);

    /*+----------------------------------------------------+
      + This is where the problem ends                     +
      +----------------------------------------------------+*/

    // cacher popup + fade
    $('.popup_block').hide();
    $('#fade').hide();
});

此时，按下#new_checkboxForm按钮会在我的div中返回此字符串：

"new_checkboxName%5B%5D=test1&new_checkboxName%5B%5D=test2"

我当然理解%5B%5D代表[]（也许这应该得到纠正，我猜？）。

这是我正在寻找的基本结构：

<p>new_checkboxName[] = test1</p> <!-- could also be new_checkboxName[0] -->
<p>new_checkboxName[] = test2</p> <!-- could also be new_checkboxName[1] -->

我想我正在寻找的东西类似于PHP's preg_split，以便获得优雅的展示。

Answer 1

如何使用serializeArray而不是格式化返回的数组：

var update = function () {
    var html = $.map($('#ajout_checkboxForm').serializeArray(), function(el) {
        return '<p>' + el.name + ' = ' + el.value + '</p>'; 
    }).join('');
    $('#formulaire_appercu').html(html);
};

演示：http://jsfiddle.net/rj9nW/

Answer 2

对序列化数据进行编码，以确保URI安全。你可以这样做：

var decoded = decodeURIComponent(serializedText)

哪个会给你：

"new_checkboxName[]=test1&new_checkboxName[]=test2"

从那里，您可以轻松地分割和显示它们：

$.every(decoded.split('&'), function(index, el) {
    $('#formulaire_appercu').append('<p>' + el + '</p>);
});

jQuery表单数据到div

2 个答案:

演示：http://jsfiddle.net/rj9nW/