jQuery上傳腳本后服務器端重定向不起作用

Question

我在一個簡單的網頁上有以下代碼，我想讓用戶上傳，跟蹤上傳進度，然后在上傳完成后重定向它們（我需要在服務器端執行此操作）。腳本來顯示上傳進度。 Ajax調用中是否存在阻止重定向的內容？ 我的后端使用的是Google App Engine上的Python，我很樂意展示代碼，但我認為這無關緊要。

<style>
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>


<div class="row">
    <div class="span12">
        <div class="center-it"><h1>Upload a Video:</h1><br>
        </div>

        <form action="{{upload_url}}" method="POST" enctype="multipart/form-data">
            <input type="file" name="file" class="btn"><br> 
            <input type="submit" name="submit" value="Submit" class="btn"> 
        </form>

    </div>
</div>

    <div class="progress progress-striped active">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

#without everything below this line it works just fine
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

Answer 1

如果沒有Ajax，它會起作用，因為表單已提交到服務器上的其他頁面，然后您可以在其中重定向到另一個URL。 使用Ajax，盡管它仍在同一頁面中，並且僅收到來自服務器的響應。

您可以發送URL作為響應的一部分，然后在JavaScript中使用window.location或window.navigate重定向到新URL。