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

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

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.

    <?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:

    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";
    
    link.appendChild(img);
    container.appendChild(link);
    $forum['collapsed_image'] = container;
    
    link.click(function(event){
        event.preventDefault();
        //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

    点赞 评论

相关推荐