How to stop refreshing page after ajax call?

I think just adding return false after the on click function will stop the page from refreshing

Adding type="button" attribute to button solved my problem. Otherwise it was interpreted as submit operation.

Is the id #loginForm pointing to a form? If yes you need to listen to the submit event instead of click. If you really need to listen to the click event, you have to bind the event to the submit button or whatever triggers the form.submit().

Try something like this:

$('#loginForm').on('submit', function(e) {
    e.preventDefault();
    e.stopPropagation(); // only neccessary if something above is listening to the (default-)event too

    [YOUR CODE GOES HERE]
});

This should do the trick for you.

This was happening to me earlier tonight, and I found my way to this question - This might be a long shot but I realized what my issue was and figure this might help someone in the future dealing with this.

Are you using something like live-server locally or some other form of script that intelligently refreshes local code if new files appear in the same working folder? If so - the page is refreshing not because of your code, but because whatever ajax you called manipulated the folder you were working in resulting in the page 'updating'.