Question

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

用户选择（ Page1.html ） - ＆gt; Ajax - ＆gt;重定向到 Page2.html - ＆gt;在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。在您当前的解决方案中，在更换包装器html之前加载page2。

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

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

这里有一些问题。

执行window.location.href = 'Page2.html';时，会停止执行其余代码并重定向浏览器。
$("#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的更多信息。

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

4 个答案: