Question

我已经试图解决这个问题好几天了，这让我疯了。我有一些需要由Ajax提交的数据。它是动态的，所以我不知道它有多少个字段。最重要的是，字段的名称是多维的，也是动态的。例如，可能有一个名为data[name]和data[title]的输入，而另一个较大的输入可能包含data[images][0][src]，data[images][0][alt]，data[images][0][description]，data[images][1][src]， data[images][1][alt]，data[images][1][description]，数组元素数量未知。我的问题是我需要获得一个可以通过Ajax提交的对象，同时保持数据的结构。

我已尝试将数据序列化，但这只是一串name = value。我也尝试过序列化数组，但这只是给了我一个[name, value]的数组。我设法使用正则表达式手动生成对象以将其拆分，但我找不到将结果对象合并在一起的方法。我的代码的最新版本是：

$('.modal-content').find('input[name^="data"]').each(function () {
    var found = $(this).attr('name').match(re).reverse();
    var temp = $(this).val();
    $.each(found, function ()
    {
        str = this.substr(1, this.length - 2);
        var t = {};
        t[str] = temp;
        temp = t;
    });
    data = $.each({}, data, temp);
});

不幸的是它没有合并它们，它会覆盖数据中的内容和temp中的内容。如果数据有data.images[0].src = "mysrc"且临时有data.images[0].alt = "myalt"，那么我最终会得到data.images[0].alt = "myalt"，而src就不再存在了。

必须有一个简单的方法来做到这一点，到目前为止，我甚至采取了一种复杂的方式来做到这一点。有人可以帮帮我吗？

Answer 1

虽然已经有一个公认的答案。这是我的5美分：

应尽可能避免使用正则表达式的IMHO。所以我的建议是稍微更改HTML，将一些类添加到包含图像的div并更改输入的name属性：

<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
        <div class="my-image">
            <img src="http://localhost:8000/img/example.jpg">
            <input type="hidden" name="src" value="img/example.jpg">
            <div class="form-group">
                <label for="title-0">Title:</label>
                <input type="text" name="title" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
            </div>
            <div class="form-group">
                <label for="description-0">Description:</label>
                <input type="text" name="description" class="form-control" id="description-0" value="A default example image." placeholder="Description">
            </div>
            <div class="form-group">
                <label for="alt-0">Alt tag (SEO):</label>
                <input type="text" name="alt" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
            </div>
            <div class="form-group">
                <label for="order-0">Order:</label>
                <input type="number" name="order" class="form-control image-order" id="order-0" value="0">
            </div>
            <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
        </div>
    </li>
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
        <div class="my-image">
            <img src="http://localhost:8000/img/example.jpg">
            <input type="hidden" name="src" value="img/example.jpg">
            <div class="form-group">
                <label for="title-1">Title:</label>
                <input type="text" name="title" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
            </div>
            <div class="form-group">
                <label for="description-1">Description:</label>
                <input type="text" name="description" class="form-control" id="description-1" value="A default example image." placeholder="Description">
            </div>
            <div class="form-group">
                <label for="alt-1">Alt tag (SEO):</label>
                <input type="text" name="alt" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
            </div>
            <div class="form-group">
                <label for="order-1">Order:</label>
                <input type="number" name="order" class="form-control image-order" id="order-1" value="1">
            </div>
            <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
        </div>
    </li>

然后构建匹配此类的对象：

var obj = {
  data: {
    images: []
  }
}

var groups = $('.my-image');

groups.each(function(idx, el) {
  var child = {}
  $(el).find('input').each(function(jdx, info){
    var $info = $(info);
    child[$info.attr('name')] = $info.val();
  });

  obj.data.images.push(child);
});

我们会得到相同的结果，但可能不会出错。这是plunker。

Answer 2

您可以使用def read_function(): while True: time.sleep(5) # a while loop to simulate the reading print 'read serial' str = 'string to send' [client.write_message(str) for client in connections] if __name__ == '__main__': thread = Thread(target = read_function) application = make_app() http_server = tornado.httpserver.HTTPServer(application) http_server.listen(8888) thread.start() tornado.ioloop.IOLoop.instance().start() thread.join()循环循环所有inputs，使用each()从name属性创建数组，然后使用split()添加到对象

reduce

var result = {}

$('input').each(function() {
  var name = $(this).attr('name');
  var val = $(this).val();

  var ar = name.split(/\[(.*?)\]/gi).filter(e => e != '');

  ar.reduce(function(a, b, i) {
    return (i != (ar.length - 1)) ? a[b] || (a[b] = {}) : a[b] = val;
  }, result)

})

console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

将多维输入转换为JavaScript对象

2 个答案: