AJAX/PHP DB Query within Hype

[3saul]

I’ve adapted Mr Addy’s approach (found here) to query my database but I’m having some trouble. I get no results from the query. I have another PHP file with a hard coded query of ‘admin’ (a user in the database) and that works so I know my database and PHP are all working ok. I’ve attached a test hype project.

DBQuery.zip (89.5 KB)

My javascript, which is triggered by a button is here:

	$.ajax({
	
    url: 'authenticate2.php',
    type: 'POST',
    dataType: 'JSON',
    data: {
          username: $('#username').val(),
          },
     success: function (res) {
       
     $('#resultBox').text(res);

    }
});

My php file is here:

<?php

$username = $_POST['username'];

$con = mysqli_connect('127.0.0.1','root','','db1');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"db1");
$sql="SELECT * FROM Users WHERE userName = '$username'";

$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>userName</th>
<th>userPassword</th>
<th>userEmail</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['userName'] . "</td>";
    echo "<td>" . $row['userPassword'] . "</td>";
    echo "<td>" . $row['userEmail'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>

[MrAddy (Andrew)]

Okay, I need some more information really. So to start, do you see via console/resources (within the browser) the ajax call being sent. If so, do you see what is being posted ?

[MrAddy (Andrew)]

I would also add, I do not think ajax works the way you think. You can send stuff like an object, string, an array or a JSON. In the code above it is expecting a JSON response. But you are not sending a JSON object.

Also, it will get the result of the first echo, and move on. It would not expect further information, and so will not display it.

So Ajax would look like this:

$.ajax({
        url: 'authenticate2.php',
        type: 'POST',
        dataType: 'HTML',
        data: {
              username: $('#username').val(),
               },
         success: function (res) {
             $('#resultBox').text(res);
        }
   });

The PHP would need to look like this:

$con = mysqli_connect('127.0.0.1','root','','db1');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"db1");
$sql="SELECT * FROM Users WHERE userName = '$username'";

$result = mysqli_query($con,$sql);

$dataTable = "<table>
<tr>
<th>userName</th>
<th>userPassword</th>
<th>userEmail</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    $dataTable += "<tr>";
    $dataTable += "<td>" . $row['userName'] . "</td>";
    $dataTable += "<td>" . $row['userPassword'] . "</td>";
    $dataTable += "<td>" . $row['userEmail'] . "</td>";
    $dataTable += "</tr>";
}
$dataTable += "</table>";
echo $dataTable;
mysqli_close($con);
?>

Hope this helps

[3saul]

Thanks a lot. You’ve pointed me in the right direction. I’ve chosen the JSON path instead of HTML.

Database is now being successfully queried and data returned to my page. However I’m struggling now with the JSON side of things.

The output I’m getting on my page is:

[{“id”:“1”,“userName”:“admin”,“userPassword”:“admin”,“userEmail”:“admin@admin.com”,“userRegistrationIP”:"",“registrationDateTime”:“2015-05-28 21:22:54”,“userLastLogin”:“2015-05-28 21:22:54”}]

Whilst this is good to prove that all is working, I’d like to be able to choose to display a specific element of the array, say the userLastLogin time. I read (here) that I should be using JSON.parse on the returned array to turn it into a JS array. From there I should be able to get to my discreet array elements. However this does not seem to be working for me.

What am I doing wrong?

I’ve attached my test project file and php file.

Archive.zip (91.0 KB)

[MrAddy (Andrew)]

You do not need to do anything with the data that comes back, as the result is expecting to be a JSON object.

So, because I cannot see the data itself, I would guess you need something like this:

var name = res[0].name;
var email = res[0].email;

[derlordhelmchen (Thomas)]

Hmmm i try this. But didn´t get this to work. How can I get a var form a php to the hype project, without a sql database?

Thanks for the help.

[jonathan (Jonathan Deutsch)]

The easiest way would be to have the PHP generate some javascript code at the head that writes a global javascript variable. Then this variable could be used by the Hype document in whatever JavaScript actions you have.

[derlordhelmchen (Thomas)]

Can you make a little example with 1 Variable? My Problem ist, to load the PHP.

I put it in a iFrame. It works on Desktop. But on Mobile the iframe is blank.

   	var Seite = "http://url.de/php/test.php?var=" + x;

hypeDocument.getElementById('frame').children[0].src = Seite;

[jonathan (Jonathan Deutsch)]

I’m a little unclear on what you’re trying to do? Are you trying to have data from a PHP page integrate in Hype or have Hype simply load a PHP-based page into an iframe (this is what your code shows).

If the iframe is blank, you may want to look at the developer console and see what error it is giving you.