【ajax练手项目】ajax+jquery制作快递进度查询

初学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

个人练手项目，仅作分享与交流，欢迎指教