1

ajax は初めてで、このような基本的な質問をして申し訳ありません。私は使用していajaxます：

  1. フォームを送信する (python で書かれている)
  2. 何らかの計算を行い、出力ページを生成する
  3. ブラウザを出力ページにリダイレクトする

現在、手順 1 と 2 は完了していますが、ブラウザがリダイレクトしようとすると、405 error. 提案をいただければ幸いです。

HTMLフォーム

<form method="post" id="form1">File to upload:
    <input type="file" id="upfile1" name="upfile" class="required input_button" accept=".csv" />
    <input class="submit_button" type="button" value="Submit" />Upload the file!
</form>

JS コード

$('.submit_button').click(function () {
    var form_data = new FormData();
    $.each($('input[name^="upfile"]')[0].files, function (i, file) {
        form_data.append('file-' + i, file);
    });
    $.ajax({
        type: "post",
        url: "/geneec_batchoutput.html", ///////NOTE 1/////////
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function () {
            window.location = '/geneec_batchoutput.html'; ///////NOTE 2/////////
        },
        error: function (data) {
            console.log('error');
        }

    });
});

注 1

Form firebug、計算が終了し、出力ページが生成されたことがわかります。ここに画像の説明を入力 ここに画像の説明を入力

注 2

これが私が得た場所です405 error。ajaxしたがって、ブラウザを「正しい」出力ページにリダイレクトせず、代わりにブラウザを一般的なページにリダイレクトしたと思います。したがって、データのサポートがなければ、405 error.

私の質問は、ブラウザを###note 1at location で生成された出力ページにリダイレクトする方法のようです###note 2。

アップデート

「動作する」シナリオを添付しましたがajax、フォームを送信するために .submit() を使用するため、これは実際のアプローチではありません。

htmlフォーム

<form method="post" id="form1" enctype="multipart/form-data" action=geneec_batchoutput.html>File to upload:
    <input type="file" id="upfile1" name="upfile" class="required input_button" accept=".csv" />
    <input class="submit_button" type="submit" value="Submit" />Upload the file!
</form>

JS コード

   form.submit();
   $.ajax({
       type: "post",
       url: "/geneec_batchoutput.html",

       success: function () {
           window.location = '/geneec_batchoutput.html';
       }
   });

更新 2

urlコンソールに投稿して内容を確認してみました。必要なものがすべて揃っているように見えurlます。これが出力ページです。そのため、一時的に$("body").html(url);現在のページ コンテンツを置き換えるために使用します。しかし、URL はまだ/geneec_batchinput.html. URLも更新する方法はありますか？

        $.ajax({
            type: "post",
            url: "/geneec_batchoutput.html",
            data: form_data,
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                console.log(url)
                $("body").html(url);
                },
            error: function(data) {
                alert('error')
                }
        });

ありがとう！

4

1 に答える 1

0

locationリダイレクトはアクションPOST内にあるため、リクエストとして呼び出されているようです。submit次のように送信ハンドラーを微調整してみてください。

$('.submit_button').click(function (event) {
    event.preventDefault();
    // carry on...

event.preventDefault送信イベントから何かを返す必要がないようにするために使用できます。

アップデート：

これかもしれません。元のコードを使用する:

$('.submit_button').click(function (event) {
    event.preventDefault();
    // .. blah blah ..
    $.ajax({
        type: "post",
        url: "/geneec_batchoutput.html", ///////NOTE 1/////////
        // .. blah blah ..
        success: function () {
            window.location = '/geneec_batchoutput.html'; ///////NOTE 2/////////
        },
        error: function (data) {
            console.log('error');
        }
    });
    retun false;
});

非同期であるため、成功のコールバック関数で場所の変更が発行される前に、外側のイベント ハンドラーが終了しています。preventDefault は false を返す必要を回避すると思いましたが、他の同様の質問はそうではないと示唆しています。

于 2013-10-21T23:58:35.867 に答える