如何延迟重定向到页面，直到数据加载到 django 或 jquery 中？

Question

我有一个场景如下：

我有一个搜索查询表单。

提交表单后，我将重定向到新页面 (/search/results) 以显示结果。

问题是这些结果不能立即获得，它们必须从互联网上获取（我有一个可以进行网络抓取的功能）。获取所有数据后，我想重定向到该页面。

基本上就是这样 1）点击提交表单后，它不应该立即重定向而是等待（显示一些消息，例如“处理您的请求”，直到函数返回。然后重定向到该页面以显示结果

2) 我不知道如何表示我的函数已返回。 3) 我一直在思考这些http://jsfiddle.net/DLy6j/ 和this。但是这里有一个固定的延迟时间（硬编码，比如 3 秒左右）。我希望在返回我的函数（进行网络抓取）时确定延迟时间。

请分享您对如何使其工作的想法

如果不清楚，请告诉我。我正在使用 Django 框架。但我想这个功能可能无法实现 Django。但是 Jquery 和 Ajax 在这里应该会有所帮助。

编辑：

这是我的第一个想法：

   $.ajax({type: 'post',
    url: 'process_form_data',
    data: {
        html: echoHTML,
        delay: 3
    },
    beforeSend: function () {
        $('#container').html('Loading...');
    },
    success: function (markup) {
        $('#container').html(markup);
        $('#container img').on('load', function () {
            $(this).after('<div>Image loaded</div>');
        });
    }
});

如何将此 jquery 绑定到提交按钮（我猜表单操作将负责处理发布数据） 以及如何重定向成功

Answer 1

对于客户端：

HTML

<form id="target" action="/search/results">
      <input type="text" id="searchText" />
      <div id="container"></div>
      <input type="hidden" id="searchId" name="searchId" value="">
      <button id="btnSearch">Search</button>
</form>

JS

$(document).ready(function() {
        $('#btnSearch').click(function(){
            $.ajax({
                type: 'post',
                url: '/process/search',
                beforeSend: function () {
                    $('#container').html('Loading...');
                },
                data:{"searchText":$("#searchText").val()},
                success: function(result) {
                    $("#searchId").val(result);
                    $("#target").submit();
                },
                error: function(error) {
                    $('#container').html('Search process error...'); 
                }
            });
        });
    });

我不习惯django，但是对于后端，您需要检查请求是如何执行的。 - 服务器在执行搜索的时间是否持有 http 响应 - 或者发送 200/OK 然后运行搜索

• 在第一种情况下，只要请求的持续时间不超过 $.ajax 超时，就无需执行任何操作。

• 第二种情况需要后端/django方面的工作：

  。通过代码延迟 HTTP 响应以匹配第一种情况

  。实现一个 websocket 以允许服务器在长请求完成时“联系”客户端：http://blog.jupo.org/2011/08/13/real-time-web-apps-with-django-and-websockets/

EDIT（在 cmets 之后）：客户端被编辑（上图）。同样，我不习惯 Django 也不习惯 Python，所以请看下面的某种服务器端代码（类似 NodeJ）。

路由器.JS

//The variables below live and last with HTTPServer (!!not Request!!)
var search = require("my_super_search_module").search;

var contentProvider = require("my_super_content_provider").contentProvider ;

//Used to generate a random unique code to store search result
var guidGen = require("guidGenerator"); 

//Store search result between the two requests.
var pendingSearch = Array;

//First function called on incoming request
//route contains the url path (without domain)
//postData is parsed to object
//response would be an HTTPresponse provider
function onRequest(route,postData,response)
{
    switch(route)
    {
        case "/process/search":
             //callbackSearch function called when search finished
             function callbackSearch(error,result)
             {
                 if(error)
                 {
                   response.writeAndEnd(error.message,503,"text/json");
                   return;
                 }
                 //e.g. 3F2504E0-4F89-41D3-9A0C-0305E82C3301
                 var searchId = guidGen.generate("v4"); 
                 pendingSearch.add({"id":searchId,"search":result});
                 response.writeAndEnd(searchId ,200,"text/json");
             } 
             //Search is ran asynchronously
             search.perform(postData.searchText,callbackSearch);
        break;
        case "/search/results": 
             //Get search result in pending searchs
             searchResult = pendingSearch.find({"id":postData.searchId});
             //Merge search result in a html "canvas file
             pageSearchResult = contentProvider.merge("search_result_canvas.html",searchResult );
             //Remove pending search
             pendingSearch.remove({"id":postData.searchId});
             //Send the http response
             response.writeAndEnd(pageSearchResult ,200,"text/html");
        break;
    }
}

读完这个例子后，很明显这是一个相当复杂的方法。因此，我建议在发送回搜索结果的 ajax 请求和在同一页面中填充 div 容器之间进行选择，或者在用户等待回发的地方进行经典表单发布。 （实际的方式是两者的混合）。

希望对你有帮助。

Answer 2

这可以通过两步过程来完成。

首先，向 Django 发送一个 Ajax 查询，例如 /create-results URL。 这将在完成后执行 onSucess() 函数，返回结果的 ID。

第二步，onSucess() 函数使用 /create-results URL 返回的 ID 重定向到 /results?id=XXXX。