Login using JQuery, PHP and MySQL data validation issue

Question

I send my login information using ajax/jquery to php where I want to search for the user in the database. If I specify the string in the php file manually it works. It seems like there is an issue with the serialize and json_decode which i am not sure. Can anyone help me ?

I am putting in all the snippets of my html file and php file..

</div><script type="text/javascript">
    $(document).on('pageinit', '#login', function(){ 
    $(document).on('click', '#submit', function() { // catch the form's submit event
        if($('#username').val().length > 0 && $('#password').val().length > 0){
            // Send data to server through the ajax call
            // action is functionality we want to call and outputJSON is our data
                $.ajax({url: 'check.php',
                    data: {action : 'login', formData : $('#check-user').serialize()},
                    type: 'post',                  
                    async: 'true',
                    dataType: 'json',
                    beforeSend: function() {
                        // This callback function will trigger before data is sent
                        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                    },
                    complete: function() {
                        // This callback function will trigger on data sent/received complete
                        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                    },
                    success: function (result) {
                        if(result.status) {

                            $.mobile.changePage("#second"); 
                                alert(result.message);
                        } else {
                            alert('Logon unsuccessful!');
                        }
                    },
                    error: function (request,error) {
                        // This callback function will trigger on unsuccessful action               
                        alert('Network error has occurred please try again!');
                    }
                });                  
        } else {
            alert('Please fill all necessary fields');
        }          
        return false; // cancel original event to prevent form submitting
    });

});

Now the next is my PHP script...

<?php   
// We don't need action for this tutorial, but in a complex code you need a way to determine Ajax action nature
 $action = $_POST['action'];
// Decode JSON object into readable PHP object
 $formData = json_decode($_POST['formData']);

// Get username
$username = $formData->{'username'};
// Get password
$password = $formData->{'password'};

$db = @mysql_connect('.............', '......', '.......') or die("Could not connect database");
@mysql_select_db('.......', $db) or die("Could not select database");


$result = mysql_query("SELECT `password` FROM `userdb` WHERE `username`= '$username'");
$r = mysql_fetch_assoc($result);
$pass_ret = $r['password'];

// Lets say everything is in order
if($action == 'login' && $password == $pass_ret){
$output = array('status' => true, 'message' => 'Login');
}
else
{
$output = array('status' => false, 'message' => 'No Login');

}
echo json_encode($output);

?>

Do you mean $('#check-user').val().serialize()? Nevermind, guess check-user is the id of the <form>? — Niklas
– Niklas, Commented Jul 25, 2014 at 21:25

Niklas · Accepted Answer · 2014-07-25 21:35:55Z

1

jQuery .serialize() doesn't generate a JSON, but a query string. So your data parameter in your Ajax call should look like this:

data: "action=login&" + $('#check-user').serialize(),

Then you access the values like this in your PHP:

// We don't need action for this tutorial, but in a complex code you need a way
to determine Ajax action  $action = $_POST['action'];

// Get username
$username = $_POST['username'];
// Get password
$password = $_POST['password'];

answered Jul 25, 2014 at 21:35

Niklas

1,7851 gold badge12 silver badges19 bronze badges

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

2 Comments

user2939685 Over a year ago

I understand what you said, but I am curious since we were sending data in JSON dont we need to do a json_decode ?? Anyways...you rock ! The solutions works.

Niklas Over a year ago

You didn't send any data as JSON. The .serialize() function returns a query string as I said. However, I think you are referring to the {action : 'login', formData : $('#check-user').serialize()} part? That's actually not JSON, but simply a Javascript Object which jQuery converts into a query string before it's sent. You can send an Object to the parameter data instead of a query string since it's easier to read and edit.

Solrac · Accepted Answer · 2014-07-25 21:37:32Z

Any particular reason to use json(serialize) on you post? You can send a regular post and use the $_POST array... filtering it first. At the end of the day, you are doing validations on those fields right? meaning that you have those values on javascript already... otherwhise you might wanna do it.

$("#form").submit(function(event) {
    event.preventDefault(); //stop submit in order to use ajax
    validations and more validations...
$.ajax({type: "POST", 
 url: "destiny.php", 
 data: {accion: 'login', a: $(field).val(), b: $(field).val(), c: $(field).val()},
 dataType: "json", 
 timeout: 25000, 
 success: function(data) { 
    play with data...
 },error: handle_error(a,b,c)
});

In PHP you will catch all $_POST the way you usually do...

<?php
 $post = filter_input_array(INPUT_POST); //escape $_POST and play with it!
 if ($post['action'] === 'login'){
  do login and what's not...
 }else{
  dude, stay away from mah code!!
 }

Collectives™ on Stack Overflow

Login using JQuery, PHP and MySQL data validation issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related