点击DIV，从其他div上的数据库加载内容 [英] onclick on DIV, load content from database on other div
问题描述
我的概念是在html中加载其他div上的div的内容。简而言之，我想了解新的Facebook收件箱是如何工作的，当我们点击右边的消息时，内容从数据库中获取并加载到中间栏中。我知道它由一些AJAX完成可能是，但无法弄清楚它是如何可能的。
预先感谢。
如果您使用的是jQuery，您可以在div上使用onclick事件。
这是HTML / JS这项工作像这样。
<！doctype html>
< html>
< head>
< 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'，
类型：'POST'，
data：{id：data_id}，
dataType：'json'，
成功：函数（数据）{
$（'＃more-info'）。html（data.html）;
}，
错误：函数（jqXHR，textStatus，errorThrown）{
$（'＃more-info'）。html（''）;
alert（'Error Loading'）;
}
}）;
}）;
}）;
< / script>
< / head>
< body>
< div id =item-oneclass =clickabledata-id =123>点击我< / div>
< div id =item-twoclass =clickabledata-id =456>点击我< / div>
< div id =more-info>< / div>
< / body>
< / html>
假设我们有一个名为 ajax.php 的PHP文件将会返回一个json，就像我们在ajax函数 dataType：'json'中指定的那样，我们通过POST发送一个 ID ，所以这里有一个例子，你必须在它上面工作。
ajax.php
$ b
< ;？php
$ id =（int）$ _ POST ['id'];
$ query =SELECT * FROM messages WHERE message_id = {$ id} LIMIT 1; //期待一行
$ result = mysql_query（$ query）;
$ message = mysql_fetch_assoc（$ result）; //期待就行
$ json = array（）;
$ json ['html'] ='< p>'。 $消息。 < / p为H.;
header（'Content-Type：application / json'）;
echo json_encode（$ json）;
？>
My concept is to load contents of a div on other div in html. In short I want to learn how the new Facebook inbox works, when we click on a message on the right, the contents and fetched from the database and loaded in the center column. I know its done by some AJAX may be but unable to figure out how it is possible.
Thanks in advance.
if you are using jquery you can use onclick event on a div.
This is the HTML/JS this work like this.
<!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>
and let say we have a PHP file named ajax.php will return a json like we especified before in the ajax function dataType: 'json' and we are sending an ID through POST so here are a example you have to work it on it.
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上的数据库加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
