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

私がやりたいのは、このフォームを送信するときに、1 つだけでなく 2 つのファイルをエクスポートすることです。2 番目のファイルは別のスクリプトで処理されるため、出力が変更されます。

私がこれまでに試したこと：

2 つの隠しフォームを設定します。

<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ます。2 番目の形式では何も起こりませんoutput_form_2。

2 つの非表示のフォームを送信して、2 つの異なるファイルを印刷するにはどうすればよいですか? それができない場合、他の方法でこれを行うにはどうすればよいですか? (クライアント側のトリックを使用する場合、Flash や Java を使用できないことに注意してください。また、IE ユーザーをサポートできる必要があります。)

4

1 に答える 1

0

AJAX を使用してフォームを送信します。あなたの場合、最初のフォームが送信されようとしているときに POST リクエストがexportData_1.pl開始され、現在のページでのコード実行が停止します。

AJAX テクニック 2 を使用すると、ページから移動することなく、個別の POST リクエストが作成されます。

このソリューションでは、それを実現する方法について説明します。

UPD：申し訳ありませんが、問題に焦点を合わせただけで、フォームを送信するたびにファイルをダウンロードしたいという事実を無視しました。JavaScript では不可能です (すべてのブラウザーで可能というわけではありません)。

古い IE ブラウザーでも機能する別の方法は、フォームの 1 つを含む 2 つの 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 に答える