Outputting SQL queries with Javascript, PHP and AJAX

Question

I'm trying to have a form, which when submitted returns the output from a simple SQL query onto the page without needing to be reloaded (AJAX). I can get simple outputs to work but when I use the PHP for the SQL query nothing is returned. Any help would be much appreciated. I also can't find anyway to check what is wrong with my Javascript/Php.

Pretty new to web development so apologies if this is trivial. All previously found solutions haven't worked

My Code;

a1.php

<script src='../js/scriptget.js'></script>
<form>
            <fieldset>
                <legend>Login</legend>
                Username:<br>
                <input type="text" name="myusername" placeholder="Username">
                <br>
                Password:<br>
                <input type="text" name="mypassword" placeholder="Password">
                <br><br>
                <input type="submit" value="Submit" onclick='return getAccount();'>
            </fieldset>
        </form>

scriptget.js

function getAccount(){

var phpOut = $.ajax({
    type: 'GET',
    url: 'submitInjection.php',
    data: 'myusername=billsmith&mypassword=password'
});


drawOutput('hello');
return false;
}



function drawOutput(responseText){
    var container = document.getElementById('output2');
    container.innerHTML = responseText;
}

submitinjection.php

<?php
$host="localhost"; //Host Name
$username="root"; // MySql Username
$password="root"; // Mysql Password
$db_name="Honours2"; //Database Name
$tbl_name="Users"; // Table Name

// Connect to server and select database
$conn = mysql_connect("$host", "$username", "$password") or die("Cannot Connect");
mysql_select_db("$db_name") or die("Cannot select DB");


// User and Password sent from form

$myusername = $_GET['myusername'];
$mypassword = $_GET['mypassword'];

/**
Protect MYSQL INJECTION
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);

*/

$sql = "SELECT * 
        FROM $tbl_name 
        WHERE username = '$myusername'
        AND password = '$mypassword'
        ";

$result=mysql_query($sql);

/*  echo $sql; */

if (!$result){
    die('Invalid Query: ' . mysql_error() . $sql);
}

if ($result){
    echo($sql);
}

/*  var_dump($result); */   

while ($row = mysql_fetch_assoc($result)){
    echo $row['username'];
    echo ": ";
    echo $row['balance'];
}

mysql_free_result($result);

$conn->close(); 

?>

Thanks in advance

I do hope you're not putting real passwords through that in plaintext... — ArtOfCode
– ArtOfCode, Commented Jan 1, 2015 at 18:45
Add a success function / handler to your ajax call to process the results. — jeroen
– jeroen, Commented Jan 1, 2015 at 18:46
In the PHP file you echo the results you want, then in JS AJAX you use a success function with a variable for the results. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jan 1, 2015 at 18:48
@ArtOfCode No this is for testing purposes only, don't worry haha. — Mejaniks
– Mejaniks, Commented Jan 1, 2015 at 18:50
@jeroen I'm a bit new to this, would you be able to tell me how to do it? — Mejaniks
– Mejaniks, Commented Jan 1, 2015 at 18:50

jeroen · Accepted Answer · 2015-01-01 19:01:20Z

3

You need to process the results of your ajax call in for example a success function. You can also use things like .done() or $.when().then(), check the jQuery manual for that.

A simple example using a success function:

var phpOut = $.ajax({
    type: 'GET',
    url: 'submitInjection.php',
    data: 'myusername=billsmith&mypassword=password',
    success: function(data_returned) {
        alert(data_returned);
        // or
        $('#output2').html(data_returned);
    }
});

Some additional notes:

Don't use GET to send sensitive information to the server, use POST instead;
Don't store plain-text passwords, salt and hash them;
The mysql_* functions are deprecated, you should switch to mysqli_* or PDO where you can use prepared statements to avoid sql injection, making escaping unnecessary.

answered Jan 1, 2015 at 19:01

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

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

10 Comments

Mejaniks Over a year ago

I'm trying to do this now, is there a way to check where things are going wrong? An error log of some kind

jeroen Over a year ago

@Mejaniks The javascript console of your browsers development tools would be a good place to start.

Mejaniks Over a year ago

I'm currently running: function getAccount(){ var data_returned; console.log('hello'); var phpOut = $.ajax({ type: 'GET', url: 'submitInjection.php', data: 'myusername=billsmith&mypassword=password', success: function(data_returned){ drawOutput(data_returned); } }); } with no avail, I'm not even getting any output on the console, is there something super obvious I'm missing?

ArtOfCode Over a year ago

@Mejaniks If you have a console.log call, you are getting output. Press F12. What browser?

Mejaniks Over a year ago

@jeroen Haha sorry I had just forgotten to take it out the PHp when I was testing, thanks so much guys

|

Riad · Accepted Answer · 2015-01-01 19:38:15Z

0

You have to add a success callback function to your $.ajax() call. That callback function should call your 'drawOutput' function with response it gets as a parameter. Something like this:

success: function (data) {
    drawOutput(data);
}

edited Jan 1, 2015 at 19:38

Riad

3,8585 gold badges30 silver badges39 bronze badges

answered Jan 1, 2015 at 19:12

lexabug

3162 silver badges3 bronze badges

Collectives™ on Stack Overflow

Outputting SQL queries with Javascript, PHP and AJAX

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related