jQuery Mobile form ajax post not working?

I'm currently creating a simple jQuery Mobile sign in page. Here's my code:

<div data-role="page"> 
    <div data-role="header"><h1>Header</h1></div>
    <?php

    if(isset($_POST['username']) && isset($_POST['password'])){
        die("hello");
    } 

    ?>
    <div data-role="content">
        <form method="post">
                <div data-role="fieldcontain">
                <label for="username">Username:</label>
                <input id="username" type="text" name="username" />
            </div>
            <div data-role="fieldcontain">
                <label for="password">Password:</label>
                <input id="password" type="password" name="password" />
            </div>
            <input type="submit" value="Sign In" data-inline="true" data-theme="b" />
        </form>
    </div>
    <div data-role="footer"><h4>Footer</h4></div>
</div>

Whenever I type in a username and password, using firebug, I can tell that the correct post was sent, however, the page that is returned through ajax to load into the page does not have the die("hello") in it. It is just the same page that I e开发者_开发知识库ntered the login information on.

Am I using jQuery Mobile's form system wrong?

You may want to consider turning off Ajax, while you are troubleshooting your form submission. The Ajax handling of form submissions inside JQuery Mobile is implemented automatically to create a smooth transition between the form and the result. Details, here. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the

data-ajax="false"

attribute. Or, globally,

$(document).bind("mobileinit", function () {
   $.mobile.ajaxEnabled = false;
});