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

我有一个空的form标记，并且有一个函数可以生成4000个隐藏的输入，其中包含要由表单发送的数据。在不创建DOM输入的情况下设置表单数据

生成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(); 
};

来源

2014-04-25 Catalin

功能也许你可以使用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 + '"/>');

来源

2014-04-25 09:07:57 rd3n

是的。 Dom修改是昂贵的。一个需要结合变化并一次全部应用。 –

我已经添加了一个示例 – Catalin

真正的问题是您将** 8K **输入添加到DOM，这将始终需要时间。您绝对应该考虑使用另一种方法IMO。我仍然做一些测试（http://jsfiddle.net/wPfuq/1/）。还要注意，当输入处于表单中时，$ form.empty（）会导致冻结（第二次单击）。 – rd3n

在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";

成功回调。

来源

2014-04-25 09:23:28 tbailey000

您不需要将输入添加到DOM，您可以通过ajax创建一个数组数组，并通过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 
       } 
      } 
     ) 
});

希望这有助于和有意义。

来源

2014-04-25 09:27:13 dops

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

回答

相关问题