Ajax not working for login check

185
March 18, 2018, at 08:14 AM

Hello I am not good with ajax.I want to check my login info and return either 'success' or 'fail'.Buy my ajax seems to have an error.

var user = $('.username').value();
var pass = $('.password').value();
$.ajax({
  type : 'POST',
  url  : 'login_check.php',
  data : {
    'username': user,
    'password': pass
  },
  beforeSend: function() {
    $("#Loading").show();
  },
  success :  function(response) {     
    if(response=="success" && response!=="fail") {
      $('.status').html("Success! Now logging in ......");
      setTimeout(' window.location.href = "index.php"; ',4000);
    } else {
      $('#Loading i').hide();
      $('.status').html("Login fail! Please use correct credentials....");
      setTimeout(' window.location.href = "login.php"; ',4000);
    }
  }
});

Can anyone points me out?

Answer 1

The reason you are getting error is because your javascript is getting break(giving error) at $('.username').value(); as there is no value() function. If you open console you get this error. So because of this rest of script is not working. So change $('.username').value(); to this $('.username').val(); and same for the var pass = $('.password').value(); change to var pass = $('.password').val(); and also you don't need if condition as mention in comment. Your final code will be something like this.

var user = $('.username').val();
var pass = $('.password').val();
$.ajax({
    type: 'POST',
    url: //some url
        data: {
            'username': user,
            'password': pass,
        },
    beforeSend: function() {
        //some code
    },
    success: function(response) {
        // some code which you want to excute on success of api
    },
    error: function(xhr, status, error) {
        // some code which you want to excute on failure of api
    }
});
Answer 2

I dont have the whole code for your app but when it come to your ajax request your code should look like this , for a more accurate answer please show the error that you are getting

  var user = $('.username').val();
    var pass = $('.password').val();
    $.ajax({
    type : 'POST',
    url  : 'login_check.php',
    data : {
                'username':user,
                'password':pass,
                },
    beforeSend: function()
    { 
     $("#Loading").show();
    },
    success :  function(response)
       {      
       $('.status').html("Success! Now logging in ......");
       setTimeout(()=>{ window.location.href = "index.php"; },4000);
       },
    error: function(xhr, status, error) {
       $('#Loading i').hide();
       $('.status').html("Login fail! Please use correct credentials....");
       setTimeout(()=>{ window.location.href = "login.php"},4000);
      }
    });
Answer 3

Your response needs to be a PHP echo that returns a string with a value of either ”success” or ”fail”.

Your PHP response after successful login:

echo(‘success’);

Your PHP response after failed login:

echo(‘fail’);

READ ALSO
HTML key combination shortcut

HTML key combination shortcut

I'm currently trying to implement shortcuts feature on the menu of my web based projectI had already implemented single or double shortcut key combination (like F1, CTRL + Q etc

226
Multiple postMessage to eventListener to iFrame from CRM onLoad

Multiple postMessage to eventListener to iFrame from CRM onLoad

A bit new to javascriptI have embedded an html web resource in an iFrame in a Dynamics CRM entity

166
How can I create URLs using jQuery and AJAX?

How can I create URLs using jQuery and AJAX?

So I created my website mainly using jQuery and AJAX

128
Multiple scripts but bottom script is not working?

Multiple scripts but bottom script is not working?

I have these two scriptsOne is a validation script the other is to enlarge some images on hover

121