Question

我的html中有一个表单元素。在表单内部我有输入元素。其中一个输入元素应该是一个数组。我想发送一个类似于以下内容的对象。

obj = {
  input1: "blah",
  input2: "blah2,
  input3: [{
    a: 'abc',
    b: 'def',
    c: 'hig'
  },{
    a: 'cba',
    b: 'fed',
    c: 'gih'
  }],
  input4: "blah5"
}

我已尝试将此作为我的提交，但我不确定如何正确序列化以创建上述对象。

$('form').on('submit', function(event){
    event.preventDefault();
    var obj = $(this).serialize();
    $.ajax({
       method: "POST",
       url: "http://localhost/form",
       data: obj
    ...

这是我的HTML（修改为隐藏信息）我还对此示例中的元素进行了硬编码。实时它们是动态的，用户可以通过jquery函数添加或删除元素

<form id="thisFormThing">
<ul role="tablist" class="nav nav-tabs">
    <li role="presentation" class=""><a href="#globalAttributes" aria-controls="globalAttributes" role="tab" data-toggle="tab" aria-expanded="false">Global Attributes</a></li>
    <li role="presentation" class="active"><a href="#inputs" aria-controls="inputs" role="tab" data-toggle="tab" aria-expanded="true">Inputs</a></li>
</ul>
<div class="tab-content">
    <div id="globalAttributes" role="tabpanel" style="padding-top: 20px" class="tab-pane">
        <div class="clearfix">
            <div class="form-group"><label for="input1" class="col-sm-2 control-label">Input1:</label>
                <div class="col-md-1"><input type="text" name="input1" id="input1" class="form-control"></div>
            </div>
        </div>
        <div class="clearfix">
            <div class="form-group"><label for="input2" class="col-sm-2 control-label">Input2:</label>
                <div class="col-sm-3"><select class="form-control"><option value="1">blah2</option><option value="2">blah3</option><option value="3">blah4</option>
            </div>
        </div>
    </div>
    <div id="hosts" role="tabpanel" style="padding-top: 20px" class="tab-pane active">
        <table id="dataTable" class="table table-hover table-condensed">
            <thead>
                <tr>
                    <th>a</th>
                    <th>b</th>
                    <th>c</th>
                </tr>
            </thead>
            <tbody id="dataBody">
                <tr id="0">
                    <td><input type="text" name="a" class="form-control"></td>
                    <td><input type="text" name="b" class="form-control input-sm"></td>
                    <td><input type="text" name="c" class="form-control"></td>
                </tr>
                <tr id="1">
                    <td><input type="text" name="a" class="form-control"></td>
                    <td><input type="text" name="b" class="form-control input-sm"></td>
                    <td><input type="text" name="c" class="form-control"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="clearfix">
        <div class="form-actions"><input type="submit" name="commit" value="submit" class="btn btn-primary"></div>
    </div>
</div>

Answer 1

一种可能的解决方案是使用textarea而不是输入（用于更加舒适的输入）并将其解析为逗号分隔的字符串：

// Assuming the string the user types is "asd, asd2, asd3"
// Trim it before splitting to remove whitespaces
string.trim().split(','); // Outputs ["asd", "asd2", "asd3"]

您可以告诉用户预期的语法，以便您知道如何解析生成的字符串。

注意事项：

您可能还需要在拆分之前修剪换行符和所有空格。答案就是在stackOverflow。
要执行多个对象，您可以使用多个输入，也可以定义允许用户在字符串中定义对象的语法，然后从较大的结构到较小的结构多次解析。

使用jQuery将Array Array对象转换为AJAX调用

1 个答案: