【问题标题】:Server side redirect not working after jQuery upload scriptjQuery上传脚本后服务器端重定向不起作用
【发布时间】:2013-07-24 00:46:33
【问题描述】:

我有一个简单网页的以下代码,我想让用户上传,跟踪上传进度,然后在上传完成后重定向它们(我需要在服务器端执行此操作)它工作得很好没有底部脚本来显示上传进度。 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>

【问题讨论】:

  • 这不是 ajax 的工作方式。重定向必须在js中完成
  • 我在任务队列中设置了一个后台进程,我需要该进程的信息才能知道重定向到哪里。
  • 你知道 ajax 是如何阻止重定向的吗?

标签: javascript jquery html


【解决方案1】:

没有 Ajax 它可以工作,因为表单被提交到服务器上的不同页面,然后您可以重定向到另一个 URL。使用 Ajax 虽然它仍然在同一个页面中,并且只接收来自服务器的响应。

您可以将 URL 作为响应的一部分发送,然后在 JavaScript 中使用 window.locationwindow.navigate 重定向到新 URL。

【讨论】:

  • AJAX 不会“停止”重定向......但它会“吸收”您天真地期望看到的新页面。 AJAX 是一种在同一页面内与服务器进行 HTTP 通信的方法——GET 或 POST 请求将数据返回给 Javascript“成功”处理程序,而不是向浏览器窗口返回新页面。
  • 好的,谢谢,作为后续是/否问题你知道我是否可以在不使用浏览器中的 javascript 的情况下获得上传进度吗?
  • 只在浏览器中恐怕无法获取上传进度。如果您对进度本身有疑问,我认为最好检查这些:stackoverflow.com/questions/4856917/… stackoverflow.com/questions/15717146/… 而这个:sitepoint.com/html5-javascript-file-upload-progress-bar
猜你喜欢
  • 2010-10-06
  • 2016-09-13
  • 2015-09-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-15
  • 2017-09-28
相关资源
最近更新 更多