[JavaScript知识库]基于万维易源提供的API接口实现快递单号查询物流信息

官网地址www.showapi.com

官网还提供了不少常用的API接口重点免费!!!
利用jQuery Ajax，模板引擎实现
本人萌新也知道自己写的烂，有不好的请多多指教

• HTML结构

<div class="container">
			<div class="title">
				<h2>快递信息查询.</h2>
			</div>
			<div class="ipt">
				<label>请输入单号:</label>
				<input type="text" name="" id="" value="" placeholder=""/>
			</div>
			<div class="btn"><button>查询</button></div>
			<div class="logo">
				
			</div>
			<div class="content">
				
			</div>
		</div>

• css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body {
	background-color: #eee;
}
ul {
	list-style: none;
}
button {
	padding: 10px 60px;
	background-color: #1271B0;
	color: white;
	border: none;
	cursor: pointer;
}
button:focus,input:focus {outline: none;}
.container {
	width: 50%;
	height: calc(100vh - 50px);
	margin: 0 auto;
	margin-top: 50px;
	box-shadow: 0 0 10px #00000060;
	border-radius: 10px 10px 0 0;
	background-color: white;
	overflow: hidden;
	/*position: absolute;*/
}
.ipt {
	padding-left: 10%;
	font-size:1.5rem;
}
.ipt input {
	height: 30px;
	background-color: #eee;
	border: 1px solid #606266;
}
.ipt,.title {width: 100%;}
.title h2 {
	color: #1271b0;
	text-align: center;
	line-height: 4.2em;
	font-size: 2rem;
}
.ipt label {color: #606266;font-size: 16px;}
.btn {
	/*text-align: center;*/
	margin: 10px 10%;
}
.content {
	padding:0 5%;
	overflow: auto;
	height: 100%;
	padding-bottom: 100%;
}
.list {
	width: 100%;
	margin-top: 10%;
	
}
.logo {
	margin: 15px 10%;
}

@media screen and (max-width:768px) {
	.container {
		width: 100%;
	}
}

• js

$(function(){
				$("button").click(function(){
					var nu = $("input").eq(0).val();
					if(nu == ''){
						alert('请输入单号');
						return;
					}else {
						$.ajax({    //get请求
							type:'GET',
							async:false,//同步方式
							url:'https://route.showapi.com/64-19?showapi_appid='+'705113'+'&showapi_sign='+'df7f9e82497f443c81ec6da8cb1a4320'+'&com=auto'+'&nu='+nu,
							dataType:'json',
							success:function(res){
								//console.log(res)
								var tpl = template('tpl',{info:res.showapi_res_body.data});//template模板引擎
								//console.log(tpl)
								$(".content").html(tpl);
								var logo = '<img src="'+res.showapi_res_body.logo+'" >'+'<p>'+res.showapi_res_body.expTextName+'</p>';
								$(".logo").html(logo);
								
							}
						})
					}
					
				
					
				})
			})

• 模板引擎代码
• 请确保引入了template.js

<script type="text/text/html" id="tpl">
			{{each info}}
				<ul class="list">
					<li class="time">{{$value.time}}</li>
					<li class="addres">{{$value.context}}</li>
				</ul>
				
			{{/each}}
		</script>