Fetching JSON data from a php file with jQuery's $.ajax( ) function does not work

Question

I am trying to understand the magic of the .ajax() function with jQuery. I am having a hard time getting what I want to be done. I basically want a div with content that refreshes every x time (about every 10 seconds). Mainly, this will output the latest posts that have been posted to a table in my database. Pretty much I am using this example to get an idea of how I can achieve my goal, but unfortunately I am not getting what I want.

I am trying to set my file so that when the refresh button is clicked, the div refreshes and brings up the latest posts.

On one side we have the index.php file:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <title>Test page</title>
</head>
<body>
    <h1>Welcome to the form</h1>
    <h2>We are going to try to process this with AJAX</h2>
    <h3>I hope it works!</h3>
    <div id="content"></div>
    <button id="refresh>Refresh!</button>
    <script type="text/javascript">


    $('#refresh').on('click', function(){
        $.ajax({
            type: "POST",
            url: "process.php",
            data: ,     
            error: function(data){
                $('#content').text('Update unsuccessful!').
                slideDown('slow');
                console.log(data);
            },
            success: function(data){
                $('#content').text('Update completed!');
                console.log(data);
                        //somewhere over here use the $.getJSON() function
            },
            complete: function(data){
                setTimeout(function(){
                    $('#content').slideUp('slow');
                }, 3000);
            }
        });

      });



    </script>   
</body>
</html>

And on the other hand, we have the process.php file that queries the results from the database:

$dbhost = "localhost";

$dbname = "test";

$dbuser = "root";

$dbpass = "root";

$db = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);

$sth = $db->query("SELECT * FROM posts");

$sth->setFetchMode(PDO::FETCH_ASSOC); 

echo json_encode($sth);

Do you have any idea of how to accomplish this?

To structure my results, I want to use something like this inside the success part of my jQuery code:

    $('#outputdiv').html(
       //html code here fetching the JSON data to appear within custom divs (so I can  apply css styles to them)

);

Also, do you know how can I automatize the div to bring new results using the same &.ajax() function every x time? I have read the documentation throughly and followed many examples, but I still cant get what I want!

Thanks in advance!

Cheers!

Edits: -Fixed the echo json_encode, the "process.php", erased the data: line, and put the passing (data) into the success: error: and complete: areas and still doesnt work

you are not passing any data inside the success function and php add this echo json_encode($sth); — kamesh
– kamesh, Commented Feb 13, 2014 at 4:53

Sohil Desai · Accepted Answer · 2014-02-13 04:54:27Z

1

first url should be string type so it would look like this

url: "process.php",

then in process.php file echo your result like this

echo json_encode($sth);

and in your error, success functions add an parameter like this

error: function(data){
    //your code
},
success: function(data){
    //your code
}

also your variable form_data is not needed according to your code. so remove this line

data: form_data,

answered Feb 13, 2014 at 4:54

Sohil Desai

2,9845 gold badges26 silver badges36 bronze badges

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

Comments

nes · Accepted Answer · 2014-02-13 04:48:24Z

1

Your success function must take data argument.

And i recommend you to read about $.getJSON shortcut for this case.

answered Feb 13, 2014 at 4:48

nes

1,1161 gold badge7 silver badges10 bronze badges

Comments

Anthony Chu · Accepted Answer · 2014-02-13 04:52:18Z

0

3 things...

url: process.php should be url: "process.php"

form_data isn't really defined anywhere

success: function(){ should be success: function (data) {

answered Feb 13, 2014 at 4:52

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Comments

kuldeep.kamboj · Accepted Answer · 2014-02-13 11:06:06Z

0

Well I think you need PDO fetch after setFetchMode. Also Its better to use send JSON Response headers in Ajax request

$data = array();
while ($row = $sth->fetch()) {
   $data[] = $row;
}

header('Content-type: application/json');

echo json_encode($data);

answered Feb 13, 2014 at 11:06

kuldeep.kamboj

2,6163 gold badges29 silver badges65 bronze badges

Collectives™ on Stack Overflow

Fetching JSON data from a php file with jQuery's $.ajax( ) function does not work

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related