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

我正在使用这个HTML代码

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'] = '';
}

if（$forum['type']！='c'&&！$forum['linkto']&&$forum['posts']））
{
$forum['collapsed_image']='
';
}
其他的
{
$forum['collapsed_image']=''；
}

我想做的是，当单击此链接时，应在PHP页面上运行sql查询，从数据库中获取结果，并在HTML页面上显示

（或在同一页面上的链接下方显示该结果）

由于javascript知识有限，我无法编写一个javascript函数来完成这个过程，你能给我举个例子吗？我会非常感谢你的

谢谢大家!

---

请注意：我只想使用javascript，不想使用jQuery

test.php-整个脚本将放在这个脚本上

<?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>";
}

?>

函数ajaxCall（url，回调）{
var-xmlhttp；
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4）{
if（xmlhttp.status==200）{
回调（xmlhttp.responseText）；
}
else if（xmlhttp.status==400）{
警报（“出现错误400”）
}
否则{
警报（'返回了200以外的内容'）
}
}
}
open（“GET”，url，true）；
xmlhttp.send（）；
}
函数加载数据（id）
{
ajaxCall（'test.php？loadData&id='+id，函数（结果）{
document.getElementById（'result'）。innerHTML=result；
});
}
单击以下任何链接：

结果:



这里的问题是创建html对象的方式。通过在一行中执行此操作，您无法为单击事件附加侦听器

我建议使用javascript样式创建元素：

var container = document.createElement("div");
container.className = "expcolimage";
var link = document.createElement("a");
link.setAttribute("fid", $fid);
var img = document.createElement("img");
img.src = "images/collapse_collapsed.gif";
img.id = "ann_" + $forum['fid'] + "_img";
img.className = "expander";

link.appendChild(img);
container.appendChild(link);
$forum['collapsed_image'] = container;

link.click(function(event){
    event.preventDefault();
    //AJAX code
});

然后，我建议您看看这些例子，选择最适合您的：
只是一个附带问题：为什么不使用jQuery？使用jQuery非常简单。如果只想发出一个AJAX请求，那么加载jQuery似乎太过分了。我强烈建议您不要编写自己的AJAX处理程序。这不是小事，还有一些潜在的陷阱。jQuery或Prototype JS会帮你解决很多问题。可能是@Machavity的重复：那么请创建一个原型代码。你能给我举个例子吗？谢谢