0

好的，所以我不确定甚至开始找到答案的最佳方法。所以这个问题可能看起来很混乱。

这是交易。我想利用我编写的依赖于多个“子项”的 API 来创建某些总数。

因此，我想构建一个 UI，其中动态创建“项目输入行”（不难，做到这一点），但我希望能够 ajax 这些行集，它们的输入也以类似的方式：

{
    item01:
        input1: value,
        input2: value
    item02:
        input1: value,
        input2: value
.....

我的第一个想法当然是[]在输入名称上使用以提供具有相同名称的输入的多次传递，因为每一行将具有相同的输入。但是，这不会提供我想要的 POST 格式，因为每个帖子项都是通过该输入名称的每个输入的数组。这意味着需要做更多的工作来确保在返回结果时所有内容都与正确的项目行相关联（因为有单独的结果以及总数）。

那么有没有人做过与我希望达到的类似的事情？知道如何在序列化之前将输入分组到一个大型 POST 对象中的单个对象中吗？

示例 HTML

<div id="Items" class="row">
    <fieldset class="fieldset-item ui-corner-all">
        <legend><p>Item</p></legend>
        <fieldset class="fieldset-item-input ui-corner-all">
            <legend><p>Input</p></legend>
            <table>
                <thead>
                    <tr>
                        <th><div>In 1</div></th>
                        <th><div>In 2</div></th>
                        <th><div>In 3</div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div><input name="in1" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                        <td><div><input name="in2" type="text" class="text-center ui-widget-content ui-corner-all" /></div></td>
                        <td><div><input name="in3" type="text" class="text-center ui-widget-content ui-corner-all" /></div></td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <fieldset class="fieldset-item-output ui-corner-all ui-corner-all">
            <legend><p>Output</p></legend>
            <table>
                <thead>
                    <tr>
                        <th><div>Out 1</div></th>
                        <th><div>Out 2</div></th>
                        <th><div>Out 2</div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div><input name="out1" readonly="readonly" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                        <td><div><input name="out2" readonly="readonly" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                        <td><div><input name="out3" readonly="readonly" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </fieldset>
    <fieldset class="fieldset-item ui-corner-all">
        ...etc...
</div>

小提琴样本

4

1 回答 1

0

我找到了我喜欢的解决方案

我只是在提交前浏览每一行，并在该行中创建一个输入的串行数组，然后将它们添加到要提交的数据对象中！奇迹般有效！

$(document).on('blur change keyup', '#Items .fieldset-item-input input, #Items .fieldset-item-input select', function(e) {
    var submitData = {},
        $input = $(this).closest('.fieldset-item').find('.fieldset-item-input'),
        $output = $(this).closest('.fieldset-item').find('.fieldset-item-output');

    //  here is the key factor that helped!
    //  here i make a serial array of each items inputs
    //  and then add that array to a data object to be
    //  submitted with ajax! WORKS GREAT!
    $('#Items .fieldset-item').each(function(i) {
        submitData[i] = $(this).children('.fieldset-item-input').serializeArray();
    });

    $.ajax({
        data: submitData,
        dataType: 'json',
        type: "POST",
        url: $.myURL('v2', 'quote', 'calc'),
        beforeSend: function (xhr, settings) { /*console.log(settings.data);*/ $output.find('input').val(''); },
        success: function(data, status, xhr) {
            console.log(data);
        }
    });
});
于 2013-09-12T18:22:47.163 回答