URL gets appended with $_GET-parameters automatically after AJAX request

Question

I have the following source:

$('#loginnow').click(function() {       
    var login_useroremail       = $('input[name="login_useroremail"]').val();
    var login_password          = $('input[name="login_password"]').val();

    $.ajax({
            type: "POST",
            url: "http://www.example.com/login.php",   
            data: {
                login_useroremail: login_useroremail,
                login_password: login_password              
            },
            dataType: 'text',
            success: function(data) {       
                if(data == 'ok')
                {
                    alert('Registration successful!');  
                }
                else
                {
                    alert('Registration failed. Try again later.'); 
                }

            },
            error: function(data) {
                alert('Registration failed. Try again later.');
            }
    });     
});

I know those alerts and conditions are nasty, but as I'm in an early project state, I will refine that later. ;) I'm working with jQuery, jQuery Mobile and PHPTAL.

When I call the example and login was indeed successful (=server returns "ok"), everything is finde.

My question: Why is it that when I call the example and login is not successful, in my URL bar the parameters are automatically appended? After the call it looks like:

www.example.com/index.php?user=blah&pw=yadda&...

Sometimes it also has an anchor like

www.example.com/index.php#ui-state=dialog

At least I can imagine what that is for, I think it helps remembering what you are currently doing in the mobile app.

Answer 1

OK, now here we go.

I found out what was happening and it's a bit tricky.

When using the AJAX request above, I used data from a normal HTML-Form. In the form tag opening the HTML-form I hadn't provided an action- or method-attribute. It was just like

<form name="bla">
...
</form>

Now what happened? I pressed the submit button of the form. The jQuery-event got triggered. But at the same time, the normal form event also got triggered. As I had set no action or method, it automatically assumed

<form name="bla" method="get">
...
</form>

That's what finished me off because the GET-paramers of course appeared in the URL afterwards. :)

I now use .preventDefault() in the jquery script to avoid the normal form getting submitted any other way than via AJAX.