javascriptphpjqueryjquery-mobilephptal

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


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.


Solution

  • 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.