官网地址
官网还提供了不少常用的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:'/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>
如果觉得《基于万维易源提供的API接口实现快递单号查询物流信息》对你有帮助，请点赞、收藏，并留下你的观点哦！
