Making a Login script work with JQuery and AJAX

Question

So I have a form that I'm trying to submit via AJAX: This is how I set it up to test my php script that handles the login.

<form  class="login_form" method="post" action="login_ajax.php">
  Email: <input name="email" type="text" /> <br />
  Password: <input name="pass" type="password" /> <br />
  <input type="submit" />
</form>

This seems to work; correct credentials give a good return, json object with a "success" attribute, incorrect credentials gives a "failed" json object.

But then when I try to set up the script, nothing works.

$(document).ready(function() {
    $(".login_form").submit(function () {
       try {
        $.post("login_ajax.php", {'email':this.email.value, 'pass':this.pass.value},
          function (data) {
              alert("Back from AJAX");
          }, 'json');
       alert("Sent to AJAX");
       }
       catch(e) {
        alert(e);
       }
       return false;
   });
});

I'm not getting any exceptions, but nor am I getting the "BACK" alert. I just get the "Sent to AJAX" and then nothing. Is there something I misunderstand about the callback function passed to jQuery.post, that it would never be called?

EDIT: I replaced my .post line with the one below, and it worked correctly, the success function gets called and I've got the data that I want. I was under the impression that these were essentially equivalent.

$.ajax("login_ajax.php", 
     {'type':'POST', 
      'data':{'email':this.email.value, 'pass':this.pass.value},
      'error':function(thingy,status,em) {alert("ERROR: "+em);}, 
      'success':function(data, status) {alert(JSON.stringify(data));} 
      });

I wouldn't be getting the "Sent to AJAX" alert if I hadn't loaded JQuery. — Retsam
– Retsam, Commented Mar 30, 2013 at 3:39
Is there a way I can check that? The Network tab says Status 200, but I'm not getting any feedback from the AJAX call, since that's my problem. — Retsam
– Retsam, Commented Mar 30, 2013 at 3:50
How do you return 'succes' or 'failed' in login_ajax.php? its better if you provide the php code. — egig
– egig, Commented Mar 30, 2013 at 4:00

bruchowski · Accepted Answer · 2013-03-30 04:09:19Z

1

Check your network tab in your browser console and see if you're posting anything and check out the response from the server, post it here.

you may also want to use the full $.ajax() method and see if that works for you, you have access to the "error" callback whereas with the shortcut $.post you do not.

UPDATE: Try this code and tell us what you get:

$.ajax({
        "url" : "login_ajax.php",
        "data" : {'email':this.email.value, 'pass':this.pass.value},
        "type" : "POST",
        "dataType" : "json",
        "success" : function(data){
            alert("Back from successful ajax request");
        },
        "error" : function(jqXHR, textStatus, errorThrown){
            alert("Oops, there was an problem: " + errorThrown);
        }

    });

edited Mar 30, 2013 at 4:09

answered Mar 30, 2013 at 3:37

bruchowski

5,3617 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Retsam Over a year ago

It says Status is 200 OK, even though it never ran the callback.

Retsam Over a year ago

I did this (well, my version, slightly more correct) , see the edit to the question.

bruchowski Over a year ago

Oops you're right, I forgot the "type" option.. fixed. Glad this helped you

Retsam Over a year ago

Yeah. I still would like to figure out what was wrong with the original one.

Dipesh Parmar · Accepted Answer · 2013-03-30 03:41:36Z

0

Your code is working you can see demo.

DEMO

in DEMO you can not see back alert because login_ajax.php file is not present.

if its still not working check jQuery loaded on not because in fiddle jQuery will be added automatically.

If still now work use e.preventDefault();

Example

$(".login_form").submit(function (e) {
   e.preventDefault();

answered Mar 30, 2013 at 3:41

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

5 Comments

Retsam Over a year ago

The demo does exactly what my code does, it alerts "Sent to AJAX", but never alerts "Back from AJAX", which is the problem.

Dipesh Parmar Over a year ago

@Retsam yes i know its because in demo there is no login_ajax.php file preset..make sure your code can reach to that file..

Retsam Over a year ago

Right; making a demo that has the exact same symptoms as my code isn't helpful. I do have access to that file because the first version without any javascript (just the form) works correctly.

Dipesh Parmar Over a year ago

@Retsam i know its not helpful but atleast that clear the point that what could be the error....now can i see login_ajax.php code.??

bruchowski Over a year ago

In your network tab, the post to login_ajax.php is returning 200? Are you sure?

Collectives™ on Stack Overflow

Making a Login script work with JQuery and AJAX

2 Answers 2

4 Comments

DEMO

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related