AJAX网址无法在IE中使用

Question

I am hoping someone can help me with this. I have only just started using AJAX and I am having an issue with the URL. The user selects an option from a multiselect dropdown list. When they press save, the data is posted to the Ajax below.

 $("#getSelected").click(function (e) {
                     e.preventDefault();
                    var myList  = $('select#my-select').val();
                    var list_new = "[" +myList+ "]"
                    var parseList = JSON.parse(list_new);

                    var ajaxResponse = $.ajax({
                        type: 'POST',
                        url: "/mysite/my-account/updatefavourite.cfm?q=1&buster='+new Date().getTime();",
                        contentType: "application/json; charset=utf-8",
                        cache: false,
                        data: JSON.stringify( parseList ),
                        success: function() {
                               $("#successMessage").show();
                                }
                    })
                    alert("test");
                   location.reload();
                });

In Chrome and firefox this works fine without the alert. In IE, if I include the alert("test") then everything works fine. the data is posted to my page, it updates the database, reloads the page and updates the display list. Once I remove the alert, the url no longer works and the data is not sent to my page. Can someone help. Why in IE it works with the alert but not without it and how I can I get it to work without the alert.

Answer 1

The problem is because you're calling reload() before the AJAX request completes, therefore, depending on exactly how fast the response comes back and is handled by the browser, the request is cancelled and the page is unloaded.

To fix this call reload() within the success handler of the AJAX call:

$("#getSelected").click(function(e) {
  e.preventDefault();
  // vars...

  var ajaxResponse = $.ajax({
    // ajax settings...
    success: function() {
      $("#successMessage").show();
      location.reload();
    }
  });
});

That being said, it's very odd to make an AJAX request and then redirect the page. The entire point of AJAX is that you don't have to do that. I'd suggest you amend your logic to do either one or the other only, ie. send all the data in the request to load the page, or send the AJAX request then use JS to amend the DOM as needed with the new information.

</div>