我的概念是在 html 中将 div 的内容加载到其他 div 上。简而言之，我想了解新的 Facebook 收件箱是如何工作的，当我们单击右侧的一条消息时，从数据库中获取内容并加载到中心列中。我知道它可能是由某些 AJAX 完成的，但无法弄清楚它是如何实现的。
提前致谢。
【问题讨论】：
如果你使用 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 函数 dataType: '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 );
?>
【讨论】：
$message 在这种情况下是一条消息，如果您愿意，可以使用 while 循环将这些消息加载到数组中。并在more-info 元素内append 而不是使用$(element).html(val) 使用$(element).append(val) 并使用列表而不是简单的<p></p>
success: function(data){ $('#more-info').html(data.html); }, 这将使它加载到id为more-info的元素内