Ajax等待重定向以完成执行

Ajax wait till redirect to finish executing.

本文关键字：执行 等待 重定向 Ajax      更新时间：2023-09-26

我遇到的问题与下面链接中描述的问题基本相同，但我觉得解决方案不是很清楚。我希望我的ajax成功函数等待窗口函数执行完毕，然后修改div。相反，它修改当前页面的div，然后重定向。AJAX：成功重定向后修改新页面

main.js
$("#form").submit( function(e) {
    e.preventDefault();
    var id = $('#searchbar').val(); // store the form's data.   
        $.ajax({
                url: '/search',
                type: 'POST',
                data: {id:id}, 
                dataType: 'text',

            success: function(data) {
                //Redirect to the page where we want to display the data
                window.location.href = '/test';

                data = JSON.parse(data);
                console.log(data);
                $("#count").text("we analyzed...");
                $("#result1").text(data.county);
                $("#totals").text("with a score of..");
                $("#result2").text(data.totalSentiments);

   },
   error: function(jqXHR, textStatus, errorThrown){
     console.log("error")
     alert(textStatus, errorThrown);
  }
});
});

我建议您使用Javascript本地存储。

main.js

$("#form").submit( function(e) {
    e.preventDefault();
    var id = $('#searchbar').val(); // store the form's data.   
        $.ajax({
                url: '/search',
                type: 'POST',
                data: {id:id}, 
                dataType: 'text',

            success: function(data) {
                //Redirect to the page where we want to display the data
                window.location.href = '/test';

                data = JSON.parse(data);
                console.log(data);
                // Store
                localStorage.setItem("count", "we analyzed...");
                localStorage.setItem("result1", data.county);
                localStorage.setItem("totals", "with a score of..");
                localStorage.setItem("result2", data.totalSentiments);
   },
   error: function(jqXHR, textStatus, errorThrown){
     console.log("error")
     alert(textStatus, errorThrown);
  }
});
});

在同一页面上的就绪：

jQuery(document).ready(function(){
    if (localStorage.count) {
        $("#count").text(localStorage.count);
    }
    if (localStorage.result1) {
        $("#result1").text(localStorage.result1);
    }
    if (localStorage.totals) {
        $("#totals").text(localStorage.totals);
    }
    if (localStorage.result2) {
        $("#result2").text(localStorage.result2);
    }
});

本地存储将数据存储在浏览器存储中。您还可以从本地存储中删除数据。

设置location.href的值将导致整页刷新。

因此，您的所有脚本都将被删除。

如果你真的想使用ajax调用重定向页面的结果，你应该把这个响应数据存储在某个地方，然后在你的新页面上重用它。

//save "data" in localSotorage
localStorage.myAjaxResponse = data; //if data is JSON then use: JSON.stringify(data) instead.

然后在"/test"页面上，创建一个脚本来检查localStorage上的值，然后显示它

    data = JSON.parse(localStorage.myAjaxResponse);
    console.log(data);
    $("#count").text("we analyzed...");
    $("#result1").text(data.county);
    $("#totals").text("with a score of..");
    $("#result2").text(data.totalSentiments);

尽管如此，还有其他更好的方法来实现你想要的。

您可以这样做：

关于ajax的成功：

data = JSON.parse(data);
console.log(data);
window.location.href = '/test?county='+data.county+'&sentiment='+totalSentiments;

然后在你的test页面上写下javascript块：

   var params={};
   window.location.search
          .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
            params[key] = value;
          }
        );
    if (params.length > 0) {
        $("#count").text("we analyzed...");
        $("#result1").text(params['county']);
        $("#totals").text("with a score of..");
        $("#result2").text(params['sentiments']);
    }
相关文章：