我有一个表,其中包含通过PHP从MySQL数据库读取的数据。第一列包含所有项目名称。现在,单击表第一列中的td元素,将链接到一个页面,其中包含有关td中包含的项目的更详细信息。
现在我想到了以下想法:
$(document).ready(function() {
$('#table td:first-child').click(function() {
$('div.main').animate({
height: "50px"
}, 600);
setTimeout(function() {
$('div.data').fadeIn(1000);
}, 600);
});
});
div.main是包含该表的div容器。我现在想做的是将该容器向上滑动,并在其中淡入一个新的div-容器,新容器include()是一个PHP页面,其中包含一个动态查询(伪代码,无字符串转义,简化版本):
SELECT detail FROM items WHERE items.name = $_GET['name'];
我不知道的是,我是否以及如何告诉渐隐div容器中包含的PHP文件,它必须从数据库中获取详细信息。
现在,我可以通过JavaScript/jQuery读取项目名称,但我想不出在不重新加载页面的情况下将该值传递给PHP文件的方法。
欢迎任何想法或建议!
我认为您正在寻找的是异步JavaScript和XML(AJAX)。这听起来很吓人,但幸运的是jQuery让它变得非常简单。
您可以直接调用$.ajax(),但在大多数情况下,您可以使用其中一个方便的包装器。在这种情况下,我认为$.load()将满足您的需求。
因此,假设您的PHP文件名为detail_ajax.php
,它返回您希望放入div中的HTML(使用类data
)。那么你所要做的就是:
$('div.data').load( '/detail_ajax.php', function(data){
$(this).html(data);
});
如果你想把数据传递给detail_ajax.php
,你可以这样传递:
$('div.data').load( '/detail_ajax.php', { 'someField' : 'someValue' },
function(data) {
$(this).html(data);
}
});
在detail_ajax.php
中,如果检查$_POST['someField']
,您将看到传入的值。
您可以通过使用ajax来实现这一点。以JSON格式在单独的页面上输出查询,然后使用jquery ajax 获取查询
您需要使用ajax来做同样的事情。创建一个类似onclick的事件并调用方法在点击时调用js中的ajax设置变量,并将其传递给并按您的意愿执行,在响应中显示特定div中的数据。希望它能帮助你。
您正在寻找$.ajax()。然而,需要进行3件事才能按您的意愿实现。
首先,我们需要一个由表生成的HTML中的引用,这样我们就可以简化服务器请求。生成表格时,向TD.添加一个唯一的data-name
字符串
<td data-name="<?php echo $row['name']; ?>">
例如,如果td是在foreach
循环中生成的,那么我们期望返回array
。
现在,我们需要检测页面上的请求,以便将数据正确返回到浏览器,我们将根据您的示例查找$_GET['name']
。
<?php
if(isset($_GET['name'])):
$mysqli = new mysqli('host', 'user', 'pass', 'db');
$ret;
if($stmt = $mysqli->prepare('SELECT detail FROM items WHERE items.name = ?')):
$stmt ->bind_param('s', $_GET['name']);
$stmt ->execute();
$stmt ->bind_result($details); // we only want one column
$stmt ->fetch(); //get our row
$ret['success'] = TRUE;
$ret['html'] = '<div>'. $details .'</div>';
else:
$ret['success'] = FALSE;
endif;
echo json_encode($ret); //return to the browser
endif;
?>
现在,我们需要使用ajax来弥合服务器和浏览器之间的差距。
编辑-我忘了修改点击功能。
$('#table td:first-child').click(function() {
$('div.main').animate({
height:'0px'
}, function(){
//once the animation completes
$.ajax({
url: '/',
type: 'GET', //this is default anyway
data:{name: $(this).data('name')}, //send the name from the td clicked
dataType: 'json', //what we expect back from the server
success: function(data){ //will fire when complete. data is the servers response
if(data.success !== false){
$('div').html(data.html);
$('div.main').animate({
height: "50px"
}, 600);
}else{
alert("Something went wrong");
}
}
});
}, 600);
});