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

Question

I am using Ajax to dynamically update a data table without refreshing. I have no problem so far. The user selects certain criteria from a Form . The issue is that , I no longer want to fetch content to this same page but I want to redirect and load content on a different template:

Users selection ( Page1.html ) -> Ajax -> redirect to Page2.html -> load data within Page2

Would someone please have a look at the code below and advise why it is not working ? I am able to redirect but there isn't any returned data.

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

        }
    });
  }

Where filter.php handles the server side query and outputs an html table with the data. THanks

Answer 1

Pass e and t to your next page like

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

Once page2 is loaded, get e and t and make your ajax call and replace html of wrapper. In your current solution page2 is loaded before wrapper html gets replaced.

for creating query string from array:

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

Try this:

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


            }
        });
      }

After send to the request to the page using POST. And add this line in page2.html $("#Wrapper").html(e);

Answer 3

I would suggest to clearly choose your path :

• Option 1 : drop the ajax request, and do open a new window

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

• Option 2 : use an ajax request, and load the result in a dialog box (using bootstrap or jquery-ui)

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

Answer 4

There are a few things wrong here.

1. When window.location.href = 'Page2.html'; executes it stops the rest of the code from executing and redirects the browser.

2. The $("#Wrapper").html(e); is in your AJAX success function. So it will only ever fire after the AJAX call. When the new page loads this code isn't executed. (It will never fire anyway because of the redirect in front of it).

The whole point of AJAX is to not redirect the user. If you're redirecting them anyway then why not just have the correct content in Page2.html when it loads rather than inserting it with javascript?

Alternatively, you could drop the redirect and just load the entire Page2.html file into your current page in place of the original template using an AJAX request.

I don't know what your HTML looks like but if Page2.html has a div named #wrapper all you need to do is load everything from inside #wrapper of Page2.html into the #wrapper of Page1.html like this:

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

That code you should go in your AJAX success function in place of the redirect. You can see more about .load() here .