基本上，您需要做的是：
- 使用
php 代码将图片加载到页面上
- 同时，加载选择每张图片的按钮/链接
- 为每个按钮添加一个
data 属性并将每个图像记录的数据库行ID 存储在该数据属性中（这些按钮也都设置为打开相同的模式）
- 当用户点击按钮时，从点击的按钮中获取存储的row id
- 对另一个传入行 id 的 php 页面进行 ajax 调用
- 在另一个php页面上，使用id查找记录并返回所有字段
- 回到第一页，当ajax调用返回时，使用返回的数据填充modal的内容
另请注意：根据您从数据库中获取的其他信息，您可能只在第一页加载时将所有信息存储在按钮的数据属性中，并避免 ajax 调用 all一起。当然，如果您要获取大量数据，例如 pdf 文件之类的，那可能不切实际。
完整代码：imagesfromdb.php（主页）：
<?php
// remove below for production
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
// remove above for production
// change these to your own database details
$db = new PDO('mysql:host=sotestdbuser.db.10125908.hostedresource.com;dbname=sotestdbuser;charset=utf8', 'sotestdbuser', 'Sotestuser398!');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$sql = 'SELECT id, url FROM imagebase ORDER BY id';
$stmt = $db->prepare($sql);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
$imgGroups=array();
// check for errors
if($stmt->errorCode() == 0) {
// no errors
foreach($rows as $row) {
$id = $row['id'];
$url= $row['url'];
$imgGrp ='<div class="col-sm-4">'.
'<div class="row">'.
'<div class="col-sm-12 text-center"><img src="'.$url.'" width="100" height="100" alt=""/></div>'.
'<div class="col-sm-12 text-center">'. //note the addition of the "data-row-id" attribute below
'<button type="button" class="btn btn-primary get-data" data-row-id="'.$id.'" data-toggle="modal" href="#my-modal">Select image</button>'.
'</div>'.
'</div>'.
'</div>';
array_push($imgGroups,$imgGrp);
}
} else {
// had errors
$errors = $stmt->errorInfo();
return $errors[2];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Images From Database Test</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
img {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<div class="row text-center" >
<h1>Image From DB Test</h1>
</div>
<div class="row" >
<div class="col-sm-12" id="image-groups"> <?php echo join('',$imgGroups); ?> </div>
</div>
<!-- Modal 7 (Ajax Modal)-->
<div class="modal fade" id="my-modal" >
<div class="modal-dialog">
<div class="modal-content modal-shadow">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="my-modal-title" >Help</h4>
</div>
<div class="modal-body">
<div class="col-sm-12 text-center"><img src="" class="image" id="my-modal-image" width="100" height="100" alt=""/></div>
<div class="col-sm-12 text-center description" id="my-modal-description"> </div>
</div>
<div class="modal-footer">
<button type="button" id="" class="btn btn-default reload" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function(){
// when the user clicks on one of the buttons, get the id from the clicked button
// then make an ajax call to another php page
$('#image-groups').on('click', '.get-data', function(){
var id = $(this).data('row-id');
var sendVars = 'id='+encodeURIComponent(id);
$.ajax({
type: "POST",
url: "getimagedetails.php",
data: sendVars,
success: function(rtnData) {
rtnData = $.parseJSON(rtnData)
$('#my-modal-title').html(rtnData.title);
$('#my-modal-image').attr('src', rtnData.url);
$('#my-modal-description').html(rtnData.description);
}
});
});
});
</script>
</body>
</html>
完整代码：getimagedetails.php（我们进行 ajax 调用的页面）
<?php
// remove below for production
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
// remove above for production
// change these to your own database details
$db = new PDO('mysql:host=sotestdbuser.db.10125908.hostedresource.com;dbname=sotestdbuser;charset=utf8', 'sotestdbuser', 'Sotestuser398!');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
if(isset($_POST['id'])){
$sql = 'SELECT url, title, description FROM imagebase WHERE id=? LIMIT 1'; // "?"s here will get replaced with the array elements belowlinkslinks
$stmt = $db->prepare($sql);
$stmt->execute(array($_POST['id'])); // these array elements will replace the above "?"s in this same order
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
// check for errors
if($stmt->errorCode() == 0) {
// no errors
$rowdata = 'test';
foreach($rows as $row) {
$rowdata = array('url' =>$row['url'], 'title' =>$row['title'], 'description' =>$row['description']);
}
echo json_encode($rowdata);
} else {
// had errors
$errors = $stmt->errorInfo();
echo $errors[2];
}
}
?>