promiseall 使用一个ajax就可以调全部数据

最新推荐文章于 2024-07-28 20:46:39 发布

weixin_30445169

最新推荐文章于 2024-07-28 20:46:39 发布

阅读量314

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zyyweb/p/9639760.html

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<title></title>
	<link rel="stylesheet" href="js/css/reset.css">

	<link rel="stylesheet" href="js/swiper.css"/>
	<style>

	#tou {
	max-width: 640px;
	height: 99px;
	margin: 0 auto;
	position: relative;
	}

	#tou .heads {
	width: 620px;
	margin: auto;
	overflow: hidden;
	height: 99px;
	}

	#logo {
	float: left;
	width: 120px;
	height: 57px;

	}

	#logo img {
	max-width: 100%;
	}

	#tou #tel {
	position: absolute;
	top: 0;
	left: 325px;
	float: left;
	display: block;
	height: 99px;
	line-height: 99px;
	width: 36%;
	color: #000;
	font-size: 24px;
	font-weight: bold;

	text-align: center;

	}

	#tel span {
	display: inline-block;
	max-width: 100%;
	}

	.xia {

	position: absolute;
	top: 21px;
	right: 9px;
	display: inline-block;
	float: right;

	}

	#wei {
	max-width: 640px;
	border: 1px solid #ccc;
	margin: 0 auto;
	}

	#wei .foots h3 {
	text-align: center;
	}

	.slide {
	max-width: 640px;
	border: 1px solid #ccc;
	margin: 0 auto;
	}

	.slide img {
	width: 100%;
	height: 180px;

	}

	/----jieshaomokuai-----/

	#jieshao {
	max-width: 640px;
	margin: 10px auto;
	border: 1px solid #ccc;
	}

	#jieshao .jie {
	height: 420px;
	background: red;
	}

	#culture {
	max-width: 640px;
	}

	#culture img {
	width: 100%;
	}
	</style>

	</head>
	<body>
	<!--头部区域-->
	<div id="tou">
	<!--<iframe src="" width="" height=""></iframe>-->
	</div>
	<!--轮播模块-->
	<div class="slide">
	<div class="swiper-container">
	<div class="swiper-wrapper">
	<!--<img src="" alt="" id="img"/>-->
	<!--<div class="swiper-slide">
	<img src="image/c6.jpg"/>
	</div>
	<div class="swiper-slide">
	<img src="image/c8.jpg"/>
	</div>
	<div class="swiper-slide">
	<img src="image/c9.jpg"/>
	</div>-->
	</div>
	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>

	</div>
	</div>
	<!------------>
	<div id="jieshao">
	<div class="jie">
	<!--<h3>
	qiyejieshao
	</h3>
	<p class="pp">



	</p>-->
	</div>
	</div>
	<!--文化-->
	<!-- <div id="culture">
	<img src="./image/culture.jpg" alt="">
	</div>-->

	<div id="wei">

	</div>

	<script src="js/css/remScale.js"></script>
	<script src="js/css/respond.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/swiper.js"></script>
	</body>
	</html>

	<!--<script src="js/ejs.js"></script>
	<script type="text/template" id="temp">
	<% for(var i=0;i<data.length;i++){ %>
	<div class="swiper-slide">
	<img src=<%= data[i].src %>/>
	</div>


	<% } %>
	</script>-->
	<script>
	$(function () {
	// ------引入头部和尾部模块
	$("#tou").load("template/heads.html");
	$("#wei").load("template/footer.html");
	// -----
	// 写轮播
	function createPromise(url) {
	return new Promise(function (resolve, reject) {
	$.ajax({
	url,
	dataType: 'json',
	success(arr) {
	resolve(arr);
	},
	error(err) {
	reject(err);
	}
	})
	});
	}

	// createPromise("http://127.0.0.1:3000/slide").then(function(res){
	// console.log(res)
	// },function(){console.log(请求失败)})

	Promise.all([
	createPromise("http://127.0.0.1:3000/slide"),
	createPromise("http://127.0.0.1:3000/qiye")
	]).then(function (res) {
	// res 是一个数组

	// 第一个轮播
	var str = ""
	for (var i = 0; i < res[0].length; i++) {
	str += "<div class='swiper-slide'>"
	str += "<img src='" + res[0][i].src + "' />" //<img src="imgse/2.jpg"/> <img src=img/2.jpg/>
	str += "</div>"
	}
	$(".swiper-wrapper").html(str);

	/
	var mySwiper = new Swiper('.swiper-container', {
	direction: 'horizontal',
	loop: true,
	autoplay: 1000,
	observer: true,
	observerParents: true,

	// 如果需要分页器
	pagination: {
	el: '.swiper-pagination',
	},
	});
	///
	// ---------轮播结束企业介绍
	var strs = "";
	strs += "<h3>"
	strs += res[1][0].title
	strs += "</h3>"
	strs += "<p>"
	strs += res[1][0].content
	strs += "</p>"
	$(".jie").html(strs)

	console.log(res),

	function () {
	console.log("qingqiushibai")
	}
	})

	///
	// $.ajax({
	// type:"get",
	// url:"http://127.0.0.1:3000/slide", //首页轮播的接口
	// async:true,
	// success:function(res){
	// var str=""
	// for(var i=0;i<res.length;i++){
	// str+="<div class='swiper-slide'>"
	// str+="<img src='"+res[i].src+"' />" //<img src="imgse/2.jpg"/> <img src=img/2.jpg/>
	// str+="</div>"
	// }
	// $(".swiper-wrapper").html(str)
	// console.log(res)
	//
	//
	//
	// var mySwiper = new Swiper ('.swiper-container', {
	// direction: 'horizontal',
	// loop: true,
	//
	// // 如果需要分页器
	// pagination: {
	// el: '.swiper-pagination',
	// },
	// })
	// }
	// });
	----
	// $.ajax({
	// type:"get",
	// url:"http://127.0.0.1:3000/qiye",
	// async:true,
	// success:function(res){
	// console.log(res)
	// var str="";
	// str+="<h3>"
	// str+=res[0].title
	// str+="</h3>"
	// str+="<p>"
	// str+=res[0].content
	// str+="</p>"
	// $(".jie").html(str)
	// }
	// });


	})

	// $.ajax({
	// type:"get",
	// url:"",
	// async:true,
	// success:function(res){
	// $.ajax({
	// type:"get",
	// url:"",
	// async:true
	// });
	// }
	// });

	</script>