Jquery AJAX to retrieve PHP variable

Question

I have a php script that makes my page load slowly because it fetches API data from another site and parses it so I want to make it load last. I'm reading AJAX is the way to go because it is asynchronous. Below is my AJAX code so far. All I want to do at the moment is have AJAX fetch a variable from PHP and display it but I can't get it to work. I think I'm really close though.

Here is the DIV I want it to load to and the script trigger.

<div id="results"></div>
<script type="text/javascript">ajax_lastcount();</script>

Here is the AJAX script

<script type="text/javascript">
function ajax_lastcount() {
var hr = new XMLHttpRequest();
hr.open("GET", "/viewcount.php", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
       var data = JSON.parse(hr.responseText);
       var results = document.getElementById("results");
       results.innerHTML = data;

       }
       }
     }
     hr.send(null);
     results.innerHTML = "requesting...";
}
</script>

Here is viewcount.php page

header("Content-type", "application/json");
$lastcount = "ten";
echo json_encode($lastcount);

Well, I do not see the jQuery AJAX request, only the pure JavaScript XMLHttRequest call. Do you want us to transform this into a jQuery AJAX request? — shadyyx
– shadyyx, Commented Aug 13, 2014 at 14:39
You have the jquery tag so why not use jQuery's ajax functions, it simplifies the problem, jQuery ajax docs. Your ajax request would then be $.ajax({ url: "/viewcount.php" }).done(function(data) { $('#results').html(data); }); You may have to go through data if it is json, but a break point on it will let you know. — czobrisky
– czobrisky, Commented Aug 13, 2014 at 14:42

shadyyx · Accepted Answer · 2014-08-13 14:44:29Z

3

Using jQuery this could be achieved by this code (called automatically after the page's DOM is loaded):

$(document).ready(function() {
    $.ajax({
        url: '/viewcount.php',
        type: 'get',
        dataType: 'json',
    })
    .success(function(data) {
        $('div#results').html(data);
    });
});

If you want to perform simplified GET or POST request, you can also call this instead:

$(document).ready(function() {
    $.get('/viewcount.php', {'optional_params_object':'value'})
    .success(function(data) {
        $('div#results').html(data);
    });
});

or

$(document).ready(function() {
    $.post('/viewcount.php', {'optional_params_object':'value'})
    .success(function(data) {
        $('div#results').html(data);
    });
});

answered Aug 13, 2014 at 14:44

shadyyx

16.1k7 gold badges62 silver badges98 bronze badges

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

2 Comments

The Fourth Hamster Over a year ago

Thank you, I used the simplified GET request and it worked just fine and shaved off time. I was over complicating things.

shadyyx Over a year ago

Yes, you was, little bit. Pure XmlHttpRequest was used 8 years ago when the jQuery was still only in it's diapers. Since the AJAX requests were implemented into jQuery there is no reason to use XmlHttpRequest anymore :-). Glad it helped.

Collectives™ on Stack Overflow

Jquery AJAX to retrieve PHP variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related