Question

I have the following ajax post using jquery:

$.post("/login", {}, function(data){
    alert("yolo");
});

Which is triggered by a button click and where ‘/login’ maps to my server (using Bottle):

@route('/login', method='POST')
def login():
    return "something"

The problem I’m facing is that my callback is never called and I instead get back an html page with “something” in my body.

How can I let my browser treat my server response as data rather than as a new html page?

Answer 1

I suspect you are triggering your $.post with something like a .click on a submit button inside a <form> tag. If this is the case, then your form is going to do a standard submit and be redirected by your server to the action in question. To prevent this (and allow the ajax to occur instead) you need to prevent the browsers default form submit behavior. This can easily be done like so:

 $('#IDofYourForm').submit(function(e){ e.preventDefault(); });