We Keep Coding

Firefox displaying form data in URL upon jquery AJAX post

I have a login form which calls a jquery ajax request and posts the form data via an ASP.NET Web API endpoint.
So the process just checks username and password, and if it matches, redirect to home page. It works properly when I run from Chrome but I tested in FireFox and it's not redirecting but worst of all, it's putting the form data in the URL? Why is it doing that?
After posting, this is what the URL looks like:
http://localhost:50367/Account/Login?companycode=a&username=a&password=a
This does not happen in Chrome and I don't think I have anything in my code that would cause this.
The ajax call looks like this:
$.ajax({
url: "/Account/Login",
method: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(loginData)
})
.done((response) => {
if (response.success) {
window.location.href = response.returnUrl;
}
})
.fail((error) => {
});
What could be causing the form data to display in the URL for Firefox?

Prevent the default action of <form> submission.
form.onsubmit = function(event) {
event.preventDefault();
// do `$.ajax()` stuff
}

Form Redirect Jquery Ajax

I'm working on an HTML app in which there is a form. On clicking the submit button, I make a server-side call using jquery.ajax(). However, whenever an exception is returned from the server, like a Status Code 500, I need to display an error message on the same page. However, it automatically redirects when it encounters an error. I tried using the statusCode setting in jquery.ajax() like this:
$.ajax(
{
method: 'GET',
url: 'my url',
//...
successCode: {
500: function(response) {
alert(response.getResponseHeader("xyz"));
$('some_selector').show();
}
},
success: function(){},
error: function(){}
//...
})
But this does not seem to work. It redirects me to the action link and displays the JSON error and I cannot think of a way to prevent this redirect. Any help would be appreciated.
Thanks

It seems like your ajax options are outside of the ajax call put your parameters inside like
$.ajax(){options} => $.ajax({options})
Try this,
$.ajax({url: 'your url',
type: 'GET',
success: function (response) {
//succesfull request
}
}).fail(function (response) {
//failed request
});
You should be able to find the status code in the fail using response.status
I think your submit button is triggering the redirect. Try adding
$("#myform").submit(function(event){
event.preventDefault();
});
to prevent the redirect

AJAX call stops page from loading other elements

I'm building a website using Laravel and Jquery. The page is issuing multiple AJAX calls.
One of these calls can take multiple seconds and it seems to be blocking other elements of the page from loading. This includes images and other AJAX calls.
My code more or less looks like this.
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
//Process response (append html, images, etc.)
for (var key in response) {
newAJAXCall(response[key]);
}
},
error: function (xhr) {
}
});
newAJAXCall call looks like this:
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
//Process response
},
error: function (xhr) {
}
});
newAJAXCall is what's causing the problem. Some of the calls are done within 200 ms. but some can take multiple seconds. When this happens, if any elements didn't load yet they stop loading.
In the case of images, the html for them is already existing. The browser just stops loading them until the AJAX call is done.
I already tried setting async and using a timeout but nothing seems to fix it. The problem happens both in Chrome and Safari so it doesn't seem to be browser specific.
EDIT: Even when the for-loop is removed and the new ajax call is only issued once the problem persists if the call lasts long.
EDIT2: Could it be possible that Laravel/Php is limiting the amount of connections a single client can open?
EDIT3: It seems to be my server which causes the problem. When I load the images from a different server than my own they load fine during the ajax requests.

The problem was that my localhost server didn't have enough capacity. When the website runs on my dedicated server everything loads fine.

As per my comment, please consider putting for loop within newAJAXCall success function
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
//Process response (append html, images, etc.)
newAJAXCall(response);
},
error: function (xhr) {
}
});
function newAJAXCall(response) {
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
for (var key in response) {
//Process response[key]
}
},
error: function (xhr) {
}
});
}

Loading gif in ajax call is not working properly, it will get hanging while loading in google Chrome

Loading action should not work properly & While loading the page, the page gets hanged for few seconds due to loading action.
code as follows..
$("#loadingIcon").show();
$.ajax({
type: "GET",
url: "displayCartItems.action",
data: param,
success: function(result){
$('#cartPage').html(result) ;
$("#loadingIcon").hide();
getCartItemPriceDetail();
loadCart = false;
},
});
$("#loadingIcon").show() is consist of gif image but it is hanging in web page while loading
please find the image and please provide solution for this

From what I understand is you want to show animated gif when ajax call is in progress and stop / hide the image when it is completed. I prefer doing this way:
//Assuming loading gif is hidden
$(function () {
$(document).ajaxStart(function () {
$("#loadingIcon").show();
}).ajaxStop(function () {
$("#loadingIcon").hide();
});
});
Regarding you page hang issue, I suspect, ajax is returning an error so the success did not happen. This will cause the image to stay on ( hang issue). To find this you could check the chrome inspect element and check network and verify what response you are getting.

Try to show the image in the ajax beforeSend. Also check does the ajax success function is running or the error function.
$.ajax({
type: "GET",
url: "displayCartItems.action",
data: param,
beforeSend: function() {
$("#loadingIcon").show();
},
success: function(result) {
$('#cartPage').html(result);
$("#loadingIcon").hide();
getCartItemPriceDetail();
loadCart = false;
},
error: function(jqXHR, textStatus, errorThrown ) {
console.log(textStatus);
}
});

Redirect in the middle of an ajax request

I have a site where users can publish links. Users fill a form with 2 fields:
Title
URL
When the user clicks "submit" I have a crawler that looks for an image of the link provided and makes a thumbnail.
The problem is that the crawler usually takes about 5-10 seconds to finish loading and cropping the thumb.
I thought I could do an ajax call like this. As you can see, when the user submits a link first we see if its valid (first ajax call) then if succesful we do another ajax call to try to find and save the image of this link.
My idea was to do that while I move the user to the links.php page, however, I find that if I do it like this the AJAX call breaks and the function in save_image.php doesn't run.
What can I do to avoid making my users wait for the save_image.php process? I need this process to run, but I don't need any data returned.
$.ajax({
url: 'publish/submit_link.php',
type: 'POST',
dataType: 'JSON',
data: {
link : link,
title : title,
},
success: function (data) {
if (data)
{
$.ajax({
url: 'publish/save_image.php', type: 'POST',
data: {
id : data.id,
type : data.type,
url : url,
csrf_test_name : csrf
}
});
}
//THIS NEXT LINE BREAKS SECOND AJAX CALL
window.location = 'links.php';
}
});
Thanks in advance!
SUMMING UP: I want the user to submit a link and redirect the user to the links page while the thumbnail for that link is being generated. I don't want to show the thumbnail to the user.

The AJAX request seems to fail, because when you navigate away, the user request is aborted. Because of that, the execution of save_image.php is interrupted.
You can use PHP's ignore_user_abort to force the PHP process to continue in the background. Put it at the top of save_image.php:
<?php
ignore_user_abort(true);
// ... save image, etc.
?>
For this to work, you have to send (and flush) some output to the client:
PHP will not detect that the user has aborted the connection until an attempt is made to send information to the client. Simply using an echo statement does not guarantee that information is sent, see flush().
Any output should work (e.g. "OK"). This might be a bit of a challenge considering you're using a framework, but it shouldn't be impossible. This might work: Flushing with CodeIgniter
You can read more about PHP connection handling here.

force user to fill first the url and then the title, when user go to title field start crawl data, till finish the title and press sumbit you will gain some time and make the proccess apparently faster.

Why use XHR at all if you don't need the data returned? Just let your form submit the link to links.php and let it save the image there!

to understand your problem, we need to understand the working of javascript
your code is as follows
$.ajax({
url: 'publish/submit_link.php',
type: 'POST',
dataType: 'JSON',
data: {
link : link,
title : title,
},
success: function (data) {
if (data)
{
$.ajax({
url: 'publish/save_image.php', type: 'POST',
data: {
id : data.id,
type : data.type,
url : url,
csrf_test_name : csrf
}
});
}
//THIS NEXT LINE BREAKS SECOND AJAX CALL
window.location = 'links.php';
}
});
from the above i can say that as soon as ajax request is made, java script executes the second line regardless of the response.
we can take the following example
$.ajax({
url: 'publish/submit_link.php',
type: 'POST',
dataType: 'JSON',
data: {
link : link,
title : title,
},
success: function (data)
{
console.log(data);
}
});
for(var i = 0; i < 15000000; i++)
{
console.log(i);
}
you may see the output as follows
1
2
3
.
.
.
1000
data//response of ajax
.
.
14999999
so to avoid that you can use either jQuery.when() our ajax success function.
Hopefully this will help you