Ajax获取json数据，添加在页面上，点击弹出模态框
php等后台文件应由后端人员写完并提供接口文档，前端负责调用渲染即可（这里我自己造一下~）
- index文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jqueryMin.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<style>
.col-md-4{
margin: 20px;
width: 300px;
height: 300px;
border: 1px solid skyblue;
border-radius: 10px;
}
.col-md-4 img{
margin: 15px;
width: 250px;
height: 180px;
}
.form-group{
width: 500px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://images4.c-ctrip.com/target/310v170000012btjp8587.png" alt="">
<p>10829</p>
</div>
</div>
<!-- <!– Button trigger modal –>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4>产品名称</h4>
<p class="modal-title" id="myModalLabel">Modal title</p>
<img src="" alt="">
</div>
<div class="modal-footer">
<a href="" target="_blank">点击跳转logo页面</a>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="增加路线数">
<button class="getdata">提交</button>
</div>
</div>
</nav>
<script>
$(function () {
$('button').on('click',function () {
var card=new XMLHttpRequest();
card.open('get','hello.php?num='+$('.form-group input').val());
card.onload=function () {
var ccard=JSON.parse(card.responseText);
for( var i=0;i<$('.form-group input').val();i++){
console.log(ccard[i]);
var car=$('.col-md-4').first().clone();
car.find('img').prop('src',ccard[i].SailingMap);
car.find('p').html(ccard[i].ProductID);
console.log(car);
$('.row').append(car);
};
};
card.send(null);
}
);
})
//为row中的a标签增加绑定事件
$(function () {
$('.row').on('click','p',function () {
console.log('被惦记了');
var clickid=$(this).text();
//ajax获取数据
var detai=new XMLHttpRequest();
detai.open('post','hello.php');
detai.setRequestHeader('content-type','application/x-www-form-urlencoded');
detai.onload=function () {
//因为没有后台php文件，这里自己造一下
var ccard=JSON.parse(detai.responseText);
for (var i=0;i<ccard.length;i++){
if (ccard[i].ProductID==clickid){
//修改名称
$('#myModal p').html(ccard[i].ProductName);
$('#myModal img').prop('src',ccard[i].SailingMap);
$('#myModal').modal('show');
$('.modal-footer a').prop('href',ccard[i].CompanyLogo);
};
}
}
detai.send('name='+clickid);
})
})
</script>
</div>
</body>
</html>
- hello.php文档
<?php
// header()可省略;
header('Content-type: application/json');
$ccards=file_get_contents('data.json');
echo $ccards;
?>
- data.json文档
[
{
"ProductID": 10829,
"PackageID": 0,
"SailingMap": "https://images4.c-ctrip.com/target/310v170000012btjp8587.png",
"ProductName": "名人游轮【千禧号】 15天14晚 马尼拉+长滩岛+普林塞萨港+顺化（真美港）+芽庄+胡志明市",
"DepartureCity": "香港",
"DepartureCityID": 38,
"DepartureCityIDs": [
38
],
"ArriveCity": "新加坡",
"DestinationCities": [
"香港",
"香港",
"马尼拉",
"长滩岛",
"普林塞萨港",
"顺化",
"芽庄",
"胡志明市",
"新加坡"
],
"Score": 4.4,
"CommentTotal": 39,
"GoodCommentTotal": 0,
"CompanyName": "名人游轮",
"CompanyLogo": "https://images4.c-ctrip.com/target/cruise/633/061/715/82dc5f6bb8f94e2c986e9b94bc7b7362.jpg",
"ShipName": "千禧号",
"SubName": "马尼拉+长滩岛+普林塞萨港+顺化（真美港）+芽庄+胡志明市"
},
{ "ProductID": 10812,
"PackageID": 0,
"SailingMap": "https://images4.c-ctrip.com/target/310j0z000000mmlfn182B.png",
"ProductName": "名人游轮【星座号】 16天15晚 马斯喀特+孟买+莫尔穆加奥+科伦坡+普吉岛+乔治市（槟城）",
"DepartureCity": "迪拜",
"DepartureCityID": 1062,
"DepartureCityIDs": [1062],
"ArriveCity": "新加坡",
"DestinationCities": ["迪拜", "迪拜", "马斯喀特", "孟买", "孟买", "莫尔穆加奥", "科伦坡", "普吉岛", "乔治市"],
"Score": 4.5,
"CommentTotal": 2,
"GoodCommentTotal": 0,
"CompanyName": "名人游轮",
"CompanyLogo": "https://images4.c-ctrip.com/target/cruise/633/061/715/82dc5f6bb8f94e2c986e9b94bc7b7362.jpg",
"ShipName": "星座号",
"SubName": "马斯喀特+孟买+莫尔穆加奥+科伦坡+普吉岛+乔治市（槟城）"
},{
"ProductID": 10813,
"PackageID": 0,
"SailingMap": "https://images4.c-ctrip.com/target/310q0z000000modbr8E84.png",
"ProductName": "名人游轮【星座号】 16天15晚 乔治市（槟城）+普吉岛+科伦坡+莫尔穆加奥+孟买+马斯喀特",
"DepartureCity": "新加坡",
"DepartureCityID": 53,
"DepartureCityIDs": [53],
"ArriveCity": "迪拜",
"DestinationCities": ["新加坡", "乔治市", "普吉岛", "科伦坡", "莫尔穆加奥", "孟买", "孟买", "马斯喀特", "迪拜"],
"Score": 4.5,
"CommentTotal": 2,
"GoodCommentTotal": 0,
"CompanyName": "名人游轮",
"CompanyLogo": "https://images4.c-ctrip.com/target/cruise/633/061/715/82dc5f6bb8f94e2c986e9b94bc7b7362.jpg",
"ShipName": "星座号",
"SubName": "乔治市（槟城）+普吉岛+科伦坡+莫尔穆加奥+孟买+马斯喀特"},
{
"ProductID": 10817,
"PackageID": 0,
"SailingMap": "http://img4.imgtn.bdimg.com/it/u=2598104198,3797992104&fm=26&gp=0.jpg",
"ProductName": "test去很远很远的地方",
"DepartureCity": "迪拜",
"DepartureCityID": 1062,
"DepartureCityIDs": [1062],
"ArriveCity": "新加坡",
"DestinationCities": ["迪拜", "迪拜", "马斯喀特", "孟买", "孟买", "莫尔穆加奥", "科伦坡", "普吉岛", "乔治市"],
"Score": 4.5,
"CommentTotal": 2,
"GoodCommentTotal": 0,
"CompanyName": "名人游轮",
"CompanyLogo": "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1995558607,2368023475&fm=26&gp=0.jpg",
"ShipName": "星座号",
"SubName": "马斯喀特+孟买+莫尔穆加奥+科伦坡+普吉岛+乔治市（槟城）"
},
{
"ProductID": 10818,
"PackageID": 0,
"SailingMap": "http://img5.imgtn.bdimg.com/it/u=3704726515,2959551536&fm=26&gp=0.jpg",
"ProductName": "回家",
"DepartureCity": "迪拜",
"DepartureCityID": 1062,
"DepartureCityIDs": [1062],
"ArriveCity": "新加坡",
"DestinationCities": ["迪拜", "迪拜", "马斯喀特", "孟买", "孟买", "莫尔穆加奥", "科伦坡", "普吉岛", "乔治市"],
"Score": 4.5,
"CommentTotal": 2,
"GoodCommentTotal": 0,
"CompanyName": "名人游轮",
"CompanyLogo": "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=142774755,3622945766&fm=26&gp=0.jpg",
"ShipName": "星座号",
"SubName": "马斯喀特+孟买+莫尔穆加奥+科伦坡+普吉岛+乔治市（槟城）"}
]