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 1在位置生成的输出页面###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);用来替换当前页面内容。但网址仍然是/geneec_batchinput.html. 有没有办法更新网址？

        $.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 回答