0

我使用以下 HTML 块来表示一个（隐藏的）表单，其中包含我想要处理并在激活时打印到文件的感兴趣的数据：

<form id="output_form" action="exportData.pl" method="POST" target="_blank" style="display:none;">
  <input type="text" id="output_form_data" name="output_data" style="">
  <input type="text" id="output_form_filename" name="output_filename" style="">
</form>

当我提交此表单时，数据被发送到exportData.pl，然后将output_data数据打印到变量中的指定文件名output_filename。

非常粗略：

#!/usr/bin/perl

use strict;
use warnings;
use CGI;

my $val = param('output_data');
my $fn = param('output_filename');

print "Content-Type: text/plain\n";
print "Content-Disposition: attachment; filename=$fn\n";
print "Content-Description: File to download\n\n";

print "$val\r\n";

我想做的是在提交此表单时导出两个文件，而不仅仅是一个。第二个文件将使用不同的脚本进行处理，以便更改输出。

到目前为止我已经尝试过：

我设置了两个隐藏表格：

<form id="output_form_1" action="exportData_1.pl" method="POST" target="_blank" style="display:none;">
  <input type="text" id="output_form_data_1" name="output_data" style="">
  <input type="text" id="output_form_filename_1" name="output_filename" style="">
</form>
<form id="output_form_2" action="exportData_2.pl" method="POST" target="_blank" style="display:none;">
  <input type="text" id="output_form_data_2" name="output_data" style="">
  <input type="text" id="output_form_filename_2" name="output_filename" style="">
</form>

当我点击一个按钮时，我使用 jQuery 来触发一个在两种表单ExportData()上运行的 JavaScript 函数：submit()

function ExportData()
{
    var rawTxt = document.getElementById("results_map").innerHTML;

    var fn_1 = exportFilename(".1.tsv");
    $('#output_form_data_1').val(rawTxt);
    $('#output_form_filename_1').val(fn_1);
    $('#output_form_1').submit();

    var fn_2 = exportFilename(".2.tsv");
    $('#output_form_data_2').val(rawTxt);
    $('#output_form_filename_2').val(fn_2);
    $('#output_form_2').submit();
};

但是，submit()仅在表单上调用output_form_1。第二种形式没有任何反应output_form_2。

如何提交两个隐藏的表格来打印两个不同的文件？如果做不到这一点，我将如何通过其他方式做到这一点？（注意，如果我使用客户端技巧，我不能使用 Flash 或 Java，我需要能够支持 IE 用户。）

4

1 回答 1

0

使用 AJAX 提交表单。在您的情况下发生的情况是，当第一个表单即将提交 POST 请求以exportData_1.pl启动并且当前页面上的代码执行停止时。

通过使用 AJAX 技术，将发出 2 个单独的 POST 请求，而无需离开您的页面。

这个解决方案解释了它是如何实现的。

UPD：抱歉，只是专注于问题而忽略了您要在每次提交表单时下载文件的事实。使用 javascript 是不可能的（并非在所有浏览器中）。

在旧 IE 浏览器中也可以使用的替代方法是使用 2 个 iframe，每个 iframe 都包含您的一个表单：

<iframe src="firstFormPage.html"></iframe>
<iframe src="secondFormPage.html"></iframe>

演示

这种方法将允许您在 iframe 内提交表单，而不会导致您的主页重新加载。

UPD2：修改 iframe 中的表单字段：

<iframe id="form1" src="form1.html" frameborder="0"></iframe>
<iframe id="form2" src="form2.html" frameborder="0"></iframe><br/>
<input id="editForms" type="button" value="Edit Forms"/>

<script>
    $('#editForms').click(function(){
        $('#form1').contents().find('#input').val("Modifed in frame 1");
        $('#form2').contents().find('#input').val("Modifed in frame 2");
    });
</script>

演示

于 2013-06-27T23:37:58.833 回答