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

Question

我的概念是在HTML中的其他div上加載div的內容。 簡而言之，我想了解新的Facebook收件箱的工作原理，當我們單擊右側的消息時，其內容將從數據庫中提取並加載到中心欄中。 我知道某些AJAX可能會完成此操作，但無法弄清楚這是怎么可能的。

提前致謝。

Answer 1

如果您使用的是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文件，它將返回一個我們之前在ajax函數dataType：'json'中指定的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 );
?>

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

問題描述

1 個解決方案

解決方案1
1 已采納 2012-10-27 22:59:36

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

問題描述

1 個解決方案

解決方案1 1 已采納 2012-10-27 22:59:36

解決方案1
1 已采納 2012-10-27 22:59:36