处理 Ajax 重定向并将内容加载到新页面

Question

我正在使用 Ajax 来动态更新数据表而不刷新。到目前为止我没有问题。用户从 Form 中选择某些标准。问题是，我不再想将内容提取到同一页面，但我想重定向并在不同的模板上加载内容：

用户选择 (Page1.html) -> Ajax -> 重定向到 Page2.html -> 在 Page2 中加载数据

有人可以看看下面的代码并告诉它为什么不工作吗？我可以重定向，但没有任何返回的数据。

Ajax

if (t && e ) {
    dataArray = new Array;
    dataArray[0] = e;
    dataArray[1] = t;

 $.ajax({
   type: "POST",
   url: "includes/filter.php",
   data: {
       Name: e,
       Color: t,
          },

        success: function (e) {           

        window.location.href = 'Page2.html';  // Redirect to this page
        $("#Wrapper").html(e);    // Load content to this page in Div # Wrapper

        // If I Uncomment the two lines above and just add $("#table").html(e); it will successfully load content within the table div on the same page

        }
    });
  }

filter.php 处理服务器端查询并输出包含数据的 html 表。 谢谢

Answer 1

将 e 和 t 传递到您的下一页，如

window.location.href = 'Page2.html?e=' + e + '&t=' + t;

一旦 page2 被加载，获取 e 和 t 并进行 ajax 调用并替换包装器的 html。在您当前的解决方案中，page2 在包装器 html 被替换之前加载。

用于从数组创建查询字符串：

var array = [],
array["Name"] = "Car";
array["Color"] = "Red";
var queryStr = "";

for (var key in array){
  if(queryStr != "") queryStr += "&";
  queryStr += key + "=" + array[key];
}

var url = "Page2.html?" + queryStr;

Answer 2

试试这个：

if (t && e ) {
        dataArray = new Array;
        dataArray[0] = e;
        dataArray[1] = t;

     $.ajax({
       type: "POST",
       url: "includes/filter.php",
       data: {
           Name: e,
           Color: t,
              },

            success: function (data) {           

            window.location.href = 'Page2.html?data='+data ;  // Redirect to this page


            }
        });
      }

使用 POST 将请求发送到页面后。并将这一行添加到 page2.html $("#Wrapper").html(e);

Answer 3

我建议明确选择你的路径：

• 选项 1：放弃 ajax 请求，然后打开一个新窗口

  window.open('Page2.html?filter=yabayabayaba')

• 选项 2：使用 ajax 请求，并在对话框中加载结果（使用 bootstrap 或 jquery-ui）

  success: function (e) { $(e).dialog(); }

Answer 4

这里有一些问题。

1. 当window.location.href = 'Page2.html'; 执行时，它会停止执行其余代码并重定向浏览器。

2. $("#Wrapper").html(e); 在您的 AJAX 成功函数中。所以 只会在 AJAX 调用后触发。新页面加载时 这段代码没有被执行。 （由于前面的重定向，它永远不会触发）。

AJAX 的全部意义在于不重定向用户。如果您仍然要重定向它们，那么为什么不只是在 Page2.html 加载时包含正确的内容，而不是使用 javascript 插入呢？

或者，您可以放弃重定向，只需使用 AJAX 请求将整个 Page2.html 文件加载到当前页面中以代替原始模板。

我不知道你的 HTML 是什么样子，但如果 Page2.html 有一个名为 #wrapper 的 div，你需要做的就是像这样将 Page2.html 的 #wrapper 内部的所有内容加载到 Page1.html 的 #wrapper ：

$('#wrapper').load('Page2.html #wrapper');

您应该在 AJAX 成功函数中使用该代码来代替重定向。你可以看到更多关于 .load() here.