Ask a Question Register Login

Retrieve data from database in PHP and display them in JQuery on the same page

375

Today I need some help concerning one of my work. I'm trying to display, in JQuery, some data I retrieved, in PHP, from my database.

I need to display the data in JQuery for some reasons...

My PHP and my JQuery are on the same page, index.php, but my problem is that my ajax won't display my data and no error appears so I don't know exactly where is my mistake.

Here is my code:

<?php
    require 'inc/db-connect.php';

    $title = array();

    try{
        $sql   = "SELECT * FROM events";
        $req   = $db->query($sql);  
    }catch(PDOException $e){
        echo 'Erreur: '.$e->getMessage();
    }

    while($res = $req->fetch()){
        array_push($title, $res['title']);
    }

    echo json_encode($title);

    $req->closeCursor();
?>

<!DOCTYPE html>

<html lang="fr">
    <?php include('inc/head.html'); ?>

    <body>
        <div id="stage">

            /** 
            * ALL MY HTML GOES HERE 
            **/

        </div>
        <!-- END STAGE -->

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                    data: "",
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                    },
                    error: function(){
                        console.log('Failed to load data');   
                    }
                });
            });
        </script>
    </body>
</html>

So when I load my page, my JQuery does the "console.log('Failed to load data')" which means there is an error but I can't find it.

Somebody can help me please ?

Thnx, Antho

EDIT 1:

It seems there is no problem with my PHP request because the echo display the data I retrieve from the database. Apparently the error comes from my ajax request.

I've set the URL parameters on 'index.php' but doesn't work neither.

EDIT 2:

After some researches it seems impossible to make a PHP request and an ajax request on the same page. So I'll try something else...

486

Answer

Solution:

What you are currently doing is this:

you are creating an output that looks like this:

{"your json is": "here"}
<html>
  ... rest of html
  <script> doing an ajax request to get the json </script>
  ...
</html>

Now there are multiple problems.

  • There is json before the html output
  • there is an ajax call that tries to get the file you just outputted, but there is html after the json, so it does not understand the json

To fix this you could put it in 2 different files.

getmyjson.php

<?php
    require 'inc/db-connect.php';

    $title = array();

    try{
        $sql   = "SELECT * FROM events";
        $req   = $db->query($sql);  
    }catch(PDOException $e){
        echo 'Erreur: '.$e->getMessage();
    }

    while($res = $req->fetch()){
        array_push($title, $res['title']);
    }

    header('Content-type: application/json');
    echo json_encode($title);

    $req->closeCursor();
    exit();

index.php 

<html lang="fr">
    <?php include('inc/head.html'); ?>

    <body>
        <div id="stage">

            /** 
            * ALL MY HTML GOES HERE 
            **/

        </div>
        <!-- END STAGE -->

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                    url: "getmyjson.php"
                    data: "",
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                    },
                    error: function(){
                        console.log('Failed to load data');   
                    }
                });
            });
        </script>
    </body>
</html>

or you could put it in one file and use conditions to split it up

<?
if(isset($_GET['getmyjson']))
{
  // output json (incl header)
  exit();
}
else // why an else when you already did an exit.. just to be safe when you or someone else is modifying the code
{
  // output your main page with the ajax script that calls "url: '?getmyjson=true'"
}
88

Answer

Solution:

Set the header of the content to type of json... Here is an example of setting header type.

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

Any malformed JSON is rejected and a parse error is thrown.

People are also looking for solutions to the problem: Ajax does not return specific data from php

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.