Question

我正在使用此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'] = '';
}

我想要做的就是在点击此链接时这样做，然后应该在PHP页面上运行sql查询，该页面从数据库中获取结果显示导致HTML页面上的<div>（或者在同一页面上的该链接下显示结果）

由于javascript知识有限，我无法编写执行该过程的javascript函数，请您举个例子吗？我会非常感谢你。

谢谢！

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

Answer 1

您可以这样做：

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

?>

演示：

enter image description here

Answer 2

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

我建议用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
});

然后我建议你看看这些例子，为你选择最好的： http://www.w3schools.com/ajax/ajax_examples.asp

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

2 个答案: