单击链接时从数据库中获取结果

Question

I'm using this HTML code;

if ($forum['type'] != 'c' && !$forum['linkto'] && $forum['posts'])
{
    $forum['collapsed_image'] = '
        <div class="expcolimage">
            <a id="forum_name" fid="'.$fid.'">
                <img src="images/collapse_collapsed.gif" id="ann_'.$forum['fid'].'_img" class="expander" alt="[-]" title="[-]" />
            </a>
        </div>';
}
else
{
    $forum['collapsed_image'] = '';
}

What I want to do is to make it so when this link is clicked then an sql query should be run on a PHP page which fetches a result from database show that result in a <div> on an HTML page (or to show that result just under that link on the same page)

Due to limited knowledge in javascript I'm unable to code a javascript function which do that process, can you please provide me an example? I'll be very thankful to you.

Thank you!

PLEASE NOTE: I only want to use javascript and not jQuery

Answer 1

This is how you can do this:

test.php - the entire script is to be placed on this single script.

<?php

// Handle GET Request
if (isset($_GET['loadData']) && isset($_GET['id']))
{
    // Dummy Response
    // you should query the database here
    exit("hello #". $_GET['id']);
}

?>

<script type="text/javascript">

function ajaxCall(url, callback) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               callback(xmlhttp.responseText);
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function loadData(id)
{
    ajaxCall('test.php?loadData&id='+ id, function(result) {
        document.getElementById('result').innerHTML = result;
    });
}

</script>

Click any of these links: <br>
Result: <div style="display: inline;" id="result"></div>

<br><br>

<?php

// this is your initial database query result with links
for ($i = 1; $i <= 3; $i++)
{
    echo "&bull; Hello, I am #$i. <a href='#' onclick='loadData($i);'>Click here<a> to load data.<br>";
}

?>

Demo: