Javascript 在不创建DOM输入的情况下设置表单数据

我有一个空的

表单

标签，还有一个函数，它生成4000个隐藏输入，其中包含表单发送的数据

生成4000个隐藏输入非常快（大约需要

4ms

）。但是，当我在表单标记中添加隐藏的输入时，浏览器会冻结大约1秒

我还将隐藏的输入包装在

标记中，但没有太大帮助

是否有任何方法可以在不使用输入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();
};

函数saveUIPositions（）{
变量$form=$（“#saveUIPositionsForm”）；
$form.empty（）；
控制台时间（“ui”）；
var数组=[]；
数组。推送（“”）；
var items=dataTable.dataView.getItems（）；
对于（变量i=0，len=items.length；i

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

如果ajax不是一个选项，您能给我们生成和附加输入的代码吗？也许可以选择

我写了一个小程序（打开调试控制台查看时间信息） 要说明生成然后追加所有解决方案之间的区别，请执行以下操作：

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

---

for（var i=0；i在使用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";

成功回调。
您不需要向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
                }
            }
        )
});

inputNames='YourInputNameHere'；//可以是名称数组
generatedData=arrrayOfData//可能在别处生成
对于（i＝0；IyUp），DOM修改是昂贵的。一个需要合并更改并同时应用所有。我添加了一个示例：真正的问题是，将8K的输入添加到DOM中，这总是需要时间。您确实应该考虑使用另一个方法IO。我仍然做一些测试（）。
在表单中输入时导致冻结（第二次单击）。
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
                }
            }
        )
});