Question

我有一个空的form标记，以及一个生成4000个隐藏输入的函数，其中包含要由表单发送的数据。

生成4000个隐藏输入非常快（需要大约4ms）。但是，当我在表单标记中附加隐藏的输入时，浏览器会冻结大约1秒钟。

我还将隐藏的输入包装在<div/>标记中，但没有太多帮助。

有没有办法以编程方式设置表单数据，而不使用输入DOM元素？

类似的东西：

$form[0].setData([{ id: 1, value: "A" }, { id: 2, value: "B" }]);
$form.submit();

以下是生成隐藏输入的功能

function saveUIPositions() {
    var $form = $("#saveUIPositionsForm");
    $form.empty();

    console.time("ui");

    var array = [];
    array.push("<div>");

    var items = dataTable.dataView.getItems();
    for (var i = 0, len = items.length; i < len; i++) {
        var item = items[i];
        var index = dataTable.dataView.getRowById(item.Id) + 1;

        array.push("<input type='hidden' name='[");
        array.push(i);
        array.push("].Item_Id' value='");
        array.push(item.Id);
        array.push("' />");

        array.push("<input type='hidden' name='[");
        array.push(i);
        array.push("].Index' value='");
        array.push(index);
        array.push("' />");
    }

    array.push("</div>");

    console.timeEnd("ui");

    // here it gets very costly (and not because of array.join())
    $form.append(array.join(""));

    $form.submit();
};

Answer 1

也许您可以使用ajax发送此数据？如果是这样，您将不必生成并将您的4K隐藏输入附加到DOM。

如果ajax不是一个选项，您能否为我们提供生成和附加输入的代码？也许它可以被选择。

我写了一个小 jsFiddle （打开你的调试控制台来查看时间信息）为了说明生成然后附加所有解决方案之间的区别：

for(var i=0; i<4000; i++)
    inputs += '<input type="hidden" value="' + i + '"/>'
$('form').append(inputs);

并生成并附加每个：

for(var i=0; i<4000; i++)
    $form.append('<input type="hidden" value="' + i + '"/>');

Answer 2

在使用Javascript工作时，您甚至不需要表单元素，可以使用ajax请求将数据发送到您的服务器。

$.ajax({
    url: "myScript.php", //The script on your server that deals with the data
    data: {
        dataA: "a",
        dataB: "b",
        dataC: "c"   //Your form input name and value key pairs
    },
    success: function(data){
        alert("Form Submitted, Server Responded:"+data); //The server response
    },
    error: function(data){
        alert("Error contacting server:"+data); //Error handler
    }
});

在提交表单时，您甚至不需要重新加载页面。除非您愿意，否则只需添加：

location.href="http://link.com";

成功回调。

Answer 3

您不需要将输入添加到DOM，您可以通过ajax创建一个数据的数组，例如。

inputNames = 'YourInputNameHere'; // Could be an array of names
generatedData = arrrayOfData //presumably generated elsewhere

for (i=0;i<400;i++) {
    formData[inputName][i] = generatedData[i]

   // if you are using an array of names you want to change the above line to
   // formData[inputName[i]] = generatedData[i]
}

$('body').on('submit', '#myForm', function(e) {
   e.preventDefault();

   postUrl = 'url/to/send/data';

   // get any other use inputs that might have been taken from user ignore
   // this line if there are no inputs
   formData[] = $(this).serialize();

   $.ajax(
            {
                url: postUrl,
                type: 'POST',
                data: formData,
                dataType: 'html',
                success: function( data )
                {
                    // redirect, post message whatever
                }
            }
        )
});

希望这有帮助并且有意义。

设置表单数据而不创建DOM输入

3 个答案: