2014-08-14 15:48
浏览 40


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="[-]" />
    $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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dsstlsqt696435
    dsstlsqt696435 2014-08-14 15:58

    This is how you can do this:

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

    // 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){
               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);
    function loadData(id)
        ajaxCall('test.php?loadData&id='+ id, function(result) {
            document.getElementById('result').innerHTML = result;
    Click any of these links: <br>
    Result: <div style="display: inline;" id="result"></div>
    // 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

    点赞 评论
  • dpdp42233
    dpdp42233 2014-08-14 16:05

    The problem here is the way you're creating your html object. By doing it in one line you can't attach a listener for the click event.

    I suggest to create elements in the javascript style:

    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";
    $forum['collapsed_image'] = container;
        //AJAX code

    Then I suggest you to look at these examples for choosing the best for you: http://www.w3schools.com/ajax/ajax_examples.asp

    点赞 评论