點擊DIV，從其他div上的數據庫加載內容

我的理念是在html中加載其他div上div的內容。簡而言之，我想了解新的Facebook收件箱是如何工作的，當我們點擊右邊的消息時，內容從數據庫中獲取並加載到中間欄中。我知道它通過一些AJAX所做的可能是，但無法弄清楚它是如何可能的。點擊DIV，從其他div上的數據庫加載內容

在此先感謝。

來源

2012-10-27 user1731476

你可以在這裏找到答案：http://stackoverflow.com/questions/1313813/using-jquery-ajax-to-load-info-from-database – salih0vicX

我想要一個詳細的解釋...我是這個新手。 – user1731476

如果您使用的是jQuery，您可以在div上使用onclick事件。

這是HTML/JS這樣的工作。

<!doctype html> 
<html> 
    <head> 
     <title>Document Title</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script> 
      $('.clickable').on('click', function(){ 
       var data_id = $(this).data('id'); 
       $.ajax({ 
        url: 'ajax.php', 
        type: 'POST', 
        data: {id: data_id}, 
        dataType: 'json', 
        success: function(data){ 
         $('#more-info').html(data.html); 
        }, 
        error: function(jqXHR, textStatus, errorThrown){ 
         $('#more-info').html(''); 
         alert('Error Loading'); 
        } 
       }); 
      }); 

      }); 
     </script> 
    </head> 
    <body> 
     <div id="item-one" class="clickable" data-id="123">Click me</div> 
     <div id="item-two" class="clickable" data-id="456">Click me</div> 
     <div id="more-info"></div> 
    </body> 
</html>

，讓我們說我們有ajax.php名爲一個PHP文件，將返回一個JSON就像我們在AJAX功能之前especified 數據類型：「JSON」，我們正在通過POST發送ID所以這裏有一個例子，你必須在它上面工作。

ajax.php

<?php $id = (int)$_POST['id']; $query = "SELECT * FROM messages WHERE message_id = {$id} LIMIT 1"; //expecting one row $result = mysql_query($query); $message = mysql_fetch_assoc($result); //expecting just on row $json = array(); $json['html'] = '<p>' . $message . '</p>'; header('Content-Type: application/json'); echo json_encode($json); ?>

來源

2012-10-27 22:59:36 Welling

div id每次都有所不同。這可以是相同的，因爲我使用while循環加載右側面板上的所有消息。 – user1731476

more-info代表右邊的面板，在這種情況下'$ message'是一條消息，如果你想要，你可以使用while循環來將消息放入數組中。和'more-info'元素'append'中而不是使用'$（element）.html（val）'使用'$（element）.append（val）'並且使用列表而不是簡單的'

' – Welling

我想知道，一旦我點擊一條消息，內容將被加載到何處？ – user1731476

點擊DIV，從其他div上的數據庫加載內容

回答

相關問題