当前位置:首页 >> JavaScript>>正文
【ajax练手项目】ajax+jquery制作快递进度查询
栏目:JavaScript时间:2017-11-25热度:℃
初学ajax,用Jquery+ajax做了一个练手项目--快递查询,这个需要去申请一个免费的快递api查询key,请求对方的快递状态数据。效果如下:
页面元素如下:
<div class="mian"> <div class="top"> <div class="tt"> <p>公司名称</p> <select id="comPy"> <option>顺丰快递</option> <option>圆通快递</option> <option>中通快递</option> <option>韵达快递</option> <option>申通快递</option> <option>百事汇通</option> <option>德邦物流</option> <option>EMS</option> <option>天天快递</option> </select> </div> <div class="tt"> <p>快递单号</p> <input type="text" id="yundan" /> <input type="button" value="查询" id="chaxun"/> </div> </div> <div class="down"> <h3 id="danhao"></h3><span id="zhuangtai"></span> <ul id="jieguo"></ul> </div> </div>
样式如下:
<style> *{margin:0;padding:0;word-wrap:break-word;} html, body, h1, h2, h3, h4, ul, li, dl,input{ font-family: "Microsoft YaHei" ! important;margin:0px;padding:0px;list-style-type:none } div,ul,li,p,form{padding: 0px; margin: 0px;list-style-type: none;} .mian{width:520px;padding:10px;border:1px solid #dfdfdf;overflow:hidden;margin:30px auto 0;} .mian .top{float:left;width:500px;height:60px;background:#f5f5f5;padding:10px;} .mian .top .tt{float:left;width:500px;height:30px;} .mian .top .tt p{float:left;font-size:12px;line-height:30px;-webkit-margin-before: 0em; -webkit-margin-after: 0em;} .mian .top .tt select,input,button{float:left;margin:5px 0 0 10px;} .mian .down{float:left;width:500px;height:400px;padding:10px;} .mian .down h3{float:left;width:320px;height:40px;line-height:40px;overflow:hidden;} .mian .down span{float:right;width:120px;height:40px;line-height:40px;color:#ff5a00;text-align:right;} .mian .down ul{overflow-y:auto;width:500px;height:340px;border-top:1px solid #dfdfdf;font-size:12px;padding:20px 0 0;position:relative;} .mian .down ul li{padding:5px 10px 5px 50px;line-height:20px;background: url(dot.png) no-repeat scroll 20px 0 transparent;} .new{background: url(new.png) no-repeat;position:absolute;top:5px;left:11px;} </style>
JS代码如下:
<scirpt> var com; function kuaidi(){ switch($("#comPy").val()){ case '顺丰快递': com ='shunfeng' break; case '圆通快递': com ='yuantong' break; case '中通快递': com ='zhongtong' break; case '韵达快递': com ='yunda' break; case '申通快递': com ='shentong' break; case '百事汇通': com ='huitongkuaidi' break; case '德邦物流': com ='debangwuliu' break; case 'EMS': com ='ems' break; case '天天快递': com ='tiantian' break; }; }; $("#chaxun").click(function(){ kuaidi(); var num=$("#yundan").val(); $.ajax({ type: "GET", url:"http://q.kdpt.net/api?id=【你的快递apikey】&com="+com+"&nu="+num, dataType: "jsonp", success: function(data) { if (data.status==1) { $("#jieguo").empty();//先清空结果框中所有内容,防止上次查询结果与本次查询结果重叠 switch(data.state){ //通过返回的状态码判断当前的运输状态 case '0': $("#zhuangtai").html("运输中") break; case '1': $("#zhuangtai").html("已揽件") break; case '2': $("#zhuangtai").html("疑难件") break; case '3': $("#zhuangtai").html("已签收") break; case '4': $("#zhuangtai").html("异常签收") break; case '5': $("#zhuangtai").html("派件中") break; case '6': $("#zhuangtai").html("退回") break; } $("#danhao").html("运单号:"+data.nu); for(var i=0;i<data.data.length;i++){ $("#jieguo").append(" <li>"+data.data[i].time+"<br>"+data.data[i].context+"</li>"); } $("#jieguo").append("<span class='new'></span>"); } else { if(data.message=="ok"){ $("#jieguo").html("请核实快递单号或快递公司是否填写正确"); } else{ $("#jieguo").html("出现错误:" + data.message); } } }, error: function(jqXHR){ alert("发生错误:" + jqXHR.status); }, }); }); </scirpt>
快递查询api key申请链接:http://www.kdpt.net/express_api.html
个人练手项目,仅作分享与交流,欢迎指教
相关文章
- 兼容所有浏览器的js关闭当前页面/窗口的代码(2017-03-21)
- JS中如何将循环内容转换为数组(2017-03-22)
- JS中this的四种用法(2017-04-12)
- 【JS练手项目】纯javascript石头剪刀布游戏(2017-10-19)
- 【jQuery练手项目】jQuery制作网页定位导航效果(2017-11-28)