Question

我的情况如下：

我有一个搜索查询表单。

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

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

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

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 timeout就无所事事。
第二种情况需要在后端/ django方面工作：

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

。实现websocket以允许服务器联系＆＃34;长请求完成后的客户端：http://blog.jupo.org/2011/08/13/real-time-web-apps-with-django-and-websockets/

编辑（评论后）：编辑客户端（上图）。同样，我不习惯Django也不习惯Python，所以请看下面某种服务器端代码（NodeJs）。

Router.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。

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

2 个答案: