使用AJAX + PHP响应更新具有实时数据库值的网页

Question

I’m creating a Javascript game and I’m currently trying to write some code that will show the player’s “Gold Balance” in real time on a html webpage.

The Gold amount is contained in my SQL database, so I’m using setInterval with a Javascript function that contains an AJAX call which calls a PHP script that grabs the current balance amount for the player and sends it back as “response”.

I’m able to have this amount appear as a Javascript alert, however I need to have the response appear as text on the webpage inside a <div> instead.

This is my current code:

<script>
setInterval("checkGold()",5000); 

function checkGold()
{
        $.ajax({
     url: 'scripts/checkGold.php',
    data: "",
    dataType: 'json',
    success: function(response){
                        alert(response);       
    }});
};
</script>

I have this in my html source code, I would like to place the function in a separate file and call it from there, but when I tried this I wasn't able to send the response back to the html page correctly.

I was wondering if anyone knows how to have this response appear as text on the page inside <div> </div>?

Also, I was wondering if this method will really update the div in real time (ie, will it auto-refresh the div part of the webpage, showing an up to date value (every 5000 milliseconds)?

Thanks in advance!

Answer 1

Since you are using jQuery, you can use text() to alter the contents of an existing div (which id is "yourDiv"):

setInterval("checkGold()",5000); 

function checkGold()
{
    $.ajax({
      url: 'scripts/checkGold.php',
      data: "",
      dataType: 'json',
      success: function(response){
        $('div#yourDiv').text(response);       
      }
    });
};