How to Prevent Ajax Requests to Follow Redirects Using Jquery

How to prevent jQuery ajax from following a redirect after a post?

This is not a limitation with jQuery but with JavaScript itself; there is no way to detect a redirect in an AJAX request in JavaScript; the browser XHR objects auto-magically and invisibly follow redirects as per the spec.

The ideal option would be to add a catch in your server code to detect an AJAX request ("HTTP_X_REQUESTED_WITH" header), and return a special response to detect an anonymous user in your JavaScript, and handle appropriately.

jquery: how to handle a redirect

Standard ajax requests silently follow redirects and there is no way to stop the browser from doing it.

As alternative to ajax, there is a new Fetch API being developed, which allows manual redirect handling. You need to check if the current browser support is enough for your needs.

The problem with fetch API is, that due to security reasons (preventing data leaks), in case of redirect, the response object is filtered and has status 0. So, basically the only information left is the response.type with the value opaqueredirect. Please see spec draft. In other words, you're allowed to block redirects, but don't have access to the information from the redirect response, unless I missed something.

So, it seams that the answer to your questions is - it's not currently possible to implement full manual redirect handling, including reading the redirect URL from the redirect response.

Stopping redirect after AJAX request with jQuery

Is the document ready when your code runs? If not, $("#myForm") is returning an empty jQuery object, therefore any handlers attached to it won't ever be called. Test this by saving the jQuery object to a variable and logging it to the console.

Two solutions:

  • Move your code into a document ready handler: $(function () { /* my code dependent on DOM elements */ });
  • Use an event listener instead of binding to elements: $(document).on('submit', '#myForm', function (event) { /* handler */ }

There's nothing wrong with the event.preventDefault(); line - it can stay where it is, although I prefer to place it at the very top unless it's part of a conditional - and return false; isn't needed.

Reason I can answer this: I just setup a local test for this and came across the same problem: my submit handler wasn't running at all. But then I realised my <script> tag was before the #myForm element but my code wasn't waiting until #myForm was in the document before trying to find it with $().

Edit: Placing the <script> tag at the bottom of the <body> negates the need to wait for document ready in your case. It also speeds up page rendering, but that's a whole other discussion.

Detecting a redirect in ajax request?

The AJAX request never has the opportunity to NOT follow the redirect (i.e., it must follow the redirect). More information can be found in this answer https://stackoverflow.com/a/2573589/965648

Prevent redirect page in Ajax and PHP

Try to execute e.preventDefault() before the other lines of code, like this:

$('#imageUploadForm').on('submit', function(e) {

e.preventDefault();

var formData = new FormData(this);

$.ajax({
method:'POST',
url: "../lib/imgUpload.php",
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
alert(data);

},
error: function(data){
alert('bad');
}
});
});

There also was one round closing bracket too much at the end of this function.

Try to remove the action from your form element, and return false, like this:

 <form style="margin-top: -20px; width: inherit; cursor: default;" name="photo" id="imageUploadForm" enctype="multipart/form-data" onsubmit="return false;">

Remove method="POST" from the form element and add it to your ajax call.

Unwanted redirect to POST url after successful ajax

hello when you submit form this is submitting normally so you need to use this.

event.preventDefault()

this will stop stop normal submitting of form.



Related Topics



Leave a reply



Submit