ajax实现快递单号查询
效果：（代码写的有点乱，自行修改就可以了）
源码：
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中通快递单号查询</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
color: #333;;
}
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix{
zoom: 1;//兼容ie浏览器
}
.zt{
width: 540px;
margin: 20px auto;
}
a{
font-weight: normal;
}
.title a{
padding-left: 20px;
background: url("img/small.jpg") no-repeat left center;
}
.title em{
font-style: normal;
color: #c00;
text-decoration: underline;
}
.title{
font-size: 16px;
}
.zt .box{
width: 528px;
padding: 5px;
margin-top: 5px;
border: 1px solid #e3e3e3;
}
.box .op_delivery_container{
width: 508px;
padding: 10px;
background-color: #FAFAFA;
}
.op_delivery_container .bottom{
margin-top: 10px;
position: relative;
}
.box .op_delivery_container span{
font-size: 14px;
margin-right: 10px;
}
.box .op_delivery_container input{
display: inline-block;
width: 178px;
padding: 0 4px;
height: 24px;
font-size: 13px;
border: 1px solid #999;
border-bottom-color: #d8d8d8;
border-right-color: #d8d8d8;
outline: 0;
vertical-align: top;
}
.box .op_delivery_container button{
display: inline-block;
background-color: #388bff;
border-color: #3c8dff #408ffe #3680e6;
padding: 0 4px;
height: 24px;
font-size: 13px;
color: #fff;
vertical-align: top;
}
.box .info{
display: none;
position: relative;
border: 1px solid #f5f5f5;
border-right: none;
border-left: none;
}
.info .content{
overflow: hidden;
height: 280px;
font-size: 12px;
position: relative;
}
.content .content-inner{
position: absolute;
top: 0;
left: 0;
}
.content li{
list-style: none;
border-bottom: 1px solid #f5f5f5;
width: 510px;
overflow: hidden; }
.content li .delivery-title{
padding: 10px;
margin-left: 15px;
float: left;
border-left: solid 2px #ececec;
}
.content li .timeline-circle{
width: 55px;
height: 32px;
float: left;
position: relative;
left: -19px;
top: -10px;
}
.content li:nth-of-type(1) .timeline-circle{
background-color: #fff;
}
.content li .timeline-circle .new{
display: inline-block;
padding: 2px;
text-align: center;
vertical-align: text-bottom;
font-size: 12px;
line-height: 100%;
font-style: normal;
font-weight: 400;
color: #fff;
overflow: hidden;
background-color: red;
margin-top: 10px;
position: absolute;
left: 20px;
top: 5px;
}
.content li .timeline-circle .circle{
display: inline-block;
width: 14px;
height: 14px;
background: url("img/dout.png") no-repeat right center;
position: absolute;
top: 16px;
}
.content li:nth-of-type(1) .timeline-circle .circle{
background-position: left center;
left: 1px;
}
.content li:nth-of-type(1){
color: #f54040;
font-weight: 700;
}
.content li .delivery-info{
width: 400px;
word-break: normal;
float: left;
margin-left: -10px;
}
.info .scroll-ctr{
width: 7px;
height: 278px;
border: 1px solid #e1e1e1;
background-color: #F2F2F2;
position: absolute;
top: 0;
right: 0;
}
.info .scroll-ctr .scroll-inner{
width: 7px;
height: 130px;
border: 1px solid #e1e1e1;
position: absolute;
left: 0;
top: 0;
margin-left: -1px;
background-color: #fff;
margin-top: -1px;
}
.box .footer{
height: 120px;
padding-top: 8px;
}
.footer .logo{
float: left;
margin-right: 10px;
}
.footer .contact{
float: left;
}
.footer .contact p{
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}
.footer .contact .link a{
display: inline-block;
text-decoration: none;
color: #000;
padding: 1px 4px;
margin-right: 15px;
border: 1px solid #CCCCCC;
background-color: #F9F9F9;
}
.footer-delivery{
float: right;
}
.footer-delivery a{
color: #999;
text-decoration: none;
font-size: 12px;
padding-left: 65px;
background: url("img/mid.jpg") no-repeat left center;
}
</style>
</head>
<body>
<div class="zt">
<h3 class="title">
<a href="https://www.baidu.com/link?url=badDTxMAZ290Zuwss4KmHgpBa7suA-kxnLB6BuzIvWNdCkRclI1-Tmc7_vmSOGvG&wd=&eqid=ef03cde100041a4c000000065c6cafdb">
<em>中通快递</em>-<em>快递单号查询</em>
</a>
</h3>
<div class="box">
<div class="op_delivery_container">
<div class="c-row">
<span class="op_name">公司名称</span>
中通快递
</div>
<div class="c-row bottom">
<span class="op_name">
<span class="op_name">快递单号</span>
<input type="text" name="code" id="code"><button type="button" id="btn">查询</button>
</span>
</div>
</div>
<div class="info" id="info"></div>
<div class="footer">
<div class="footer-content clearfix">
<div class="logo">
<img src="img/big.jpg" alt="">
</div>
<div class="contact">
<p><strong>中通快递</strong></p>
<p>官网地址：<a href="www.zto.com">www.zto.com</a></p>
<p>客服电话：95311</p>
<p class="link"><a href="#">网点查询</a><a href="#">在线寄件</a><a href="#">价格查询</a><a href="#">中通优选</a></p>
</div>
</div>
<div class="footer-delivery">
<a href="#">数据来源中通速递</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*ajax获取信息*/
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
document.getElementById("info").style.display = "block";
var xhr = null;
if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var code = document.getElementById("code").value;
xhr.open("GET","zt.php?code="+code,true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
var data = JSON.parse(xhr.responseText);
var status = data.status;
if(status == "-2"){
document.getElementById("info").innerHTML = '<div style="color: red;">'+data.msg+'</div>';
}else if (status == "0"){
var data = data.data.info.context;
var str = "";
str += '<div class="content">';
str += '<ul class="content-inner" id="content_inner">';
for(var i = 0;i<data.length;i++){
str += '<li>';
str += '<div class="delivery-title">';
str += '<div class="timeline-circle">';
str += '<i class="circle"></i>';
str += '</div>';
str += '<div class="delivery-info">';
str += formTime(data[i].time)+'<br>'+data[i].desc;
str += '</div>';
str += '</div>';
str += '</li>';
}
str += '</ul>';
str += '</div>';
str += '<div class="scroll-ctr">';
str += '<div class="scroll-inner" id="scroll_inner"></div>';
str += '</div>';
document.getElementById("info").innerHTML = str;
var i = document.createElement("i");
i.setAttribute("class","new");
i.innerHTML = "最新";
var content_inner = document.getElementById("content_inner");
content_inner.firstChild.firstChild.firstChild.appendChild(i);
scroll();
}
}
}
}
function formTime(num) {
var time = num +"000";
var date = new Date();
date.setTime(time);
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDay()+'日'+(date.getHours()>12?' 下午':' 上午')+date.getHours()%12+':'+date.getMinutes()+':'+date.getSeconds();
}
function scroll() {
/*滚动控制*/
var info = document.getElementById("info");
var content_innerH = document.getElementById("content_inner").offsetHeight;
var y = 0;//滚动条的滚动距离
var m = 0;//滚动内容的滚动距离
info.onmouseover = function (ev) {
ev.preventDefault();
ev.stopPropagation();
window.onmousewheel = function (event) {
var event = event || window.event;
if(event.wheelDelta<0){
y += 10;
m -= ((content_innerH-280)*10)/(280-130);
}else if(event.wheelDelta>0){
y -= 10;
m += ((content_innerH-280)*10)/(280-130);
}
if(y<=0){
y = 0;
m = 0;
}
if(y>=149){
y = 149;
m = 280-content_innerH;
}
document.getElementById("scroll_inner").style.top = y+"px";
document.getElementById("content_inner").style.top = m+"px";
}
}
info.onmouseout = function (ev) {
window.onmousewheel = null;
}
}
</script>
</body>
</html>
zt.php
<?php
$code = $_GET['code'];
$data = '{"msg":"","status":"0","data":{"info":{"status":"1","com":"ems","state":"3","context":[{"time":"1450252800","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u5df2\u7b7e\u6536,\u4ed6\u4eba\u6536[\u9f99\u9526\u82d1\u6295\u9012\u7ec4]"},{"time":"1450172897","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u9884\u7ea62015.12.16\u518d\u6295[\u9f99\u9526\u82d1\u6295\u9012\u7ec4]"},{"time":"1450153979","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 [\u9f99\u9526\u82d1\u6295\u9012\u7ec410220812]\u6b63\u5728\u6295\u9012"},{"time":"1450088166","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u9884\u7ea62015.12.15\u518d\u6295[\u9f99\u9526\u82d1\u6295\u9012\u7ec4]"},{"time":"1450062684","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 [\u9f99\u9526\u82d1\u6295\u9012\u7ec410220812]\u6b63\u5728\u6295\u9012"},{"time":"1450000825","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u5230\u8fbe[\u9f99\u9526\u82d1\u6295\u9012\u7ec410220812]"},{"time":"1449887960","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u8f6c\u4ed6\u5c40\u5904\u7406,\u539f\u56e0:\u975e\u672c\u7ad9\u8bd5\u4ed6\u5c40[\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4]"},{"time":"1449886219","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 [\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec410221806]\u6b63\u5728\u6295\u9012"},{"time":"1449871677","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u5230\u8fbe[\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec410221806]"},{"time":"1449866125","desc":"\u3010\u5317\u4eac\u3011 \u79bb\u5f00[\u5317\u4eac10000000]\uff0c\u4e0b\u4e00\u7ad9\u662f[\u4eac\u5929\u901a\u897f],\u603b\u5305[5602],\u90ae\u8def[\u6c99\u6cb3-J1]"},{"time":"1449838500","desc":"\u3010\u5317\u4eac\u5e02\u3011 [\u5317\u4eac\u5e0210000000]\u5df2\u7ecf\u5c01\u53d1,\u603b\u5305[5602]"},{"time":"1449827400","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 \u79bb\u5f00[\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec410010120]\uff0c\u4e0b\u4e00\u7ad9\u662f[\u5317\u4eac\u5e02],\u603b\u5305[5434],\u90ae\u8def[\u5546\u51fd-\u5c0f\u5305\u51fa\u53e3]"},{"time":"1449820658","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 [\u5317\u4eac\u5e02\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec410010120]\u5df2\u7ecf\u6536\u5bc4"}],"_source_com":""},"com":"ems","company":{"url":"http:\/\/www.kuaidi100.com\/all\/ems.shtml?from=openv","fullname":"EMS","shortname":"EMS","icon":{"id":"2","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,944","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,828","normal":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=295567570,1377797753&fm=58"},"website":{"title":"www.ems.com.cn","url":"http:\/\/www.ems.com.cn\/"},"tel":"11183","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.ems.com.cn\/serviceguide\/tong_da_fan_wei.html"},{"title":"\u7f51\u4e0a\u5bc4\u4ef6","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_biao_zhun.html"}]},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/","name":"\u5feb\u9012100"}}}';
if($code == '9971121346085'){
echo $data;
}else{
echo '{"msg":" 该单号暂无物流进展，请稍后再试，或检查公司和单号是否有误","status":"-2"}';
} ?>
图片：（4个）
ajax实现快递单号查询的更多相关文章
- excel快递单号查询工具以及源码
Function kdcx(kd, orderid) Dim Err, url, kdtime, link, Errcode, Status Select Case kd '此处支持的快递公司很多的 ...
- 快递单号查询免费api接口（PHP示例）
快递单号查询API,可以对接顺丰快递查询,邮政快递查询,中通快递查询等.这些快递物流企业,提供了快递单号自动识别接口,快递单号查询接口等快递物流服务.对于电商企业,ERP服务企业,集成此接口到自己的软 ...
- python爬虫练手项目快递单号查询
import requests def main(): try: num = input('请输入快递单号:') url = 'http://www.kuaidi100.com/autonumber/ ...
- php快递单号查询源码
贴下记录下php查询快递单号的源码,能查询各种快递的快递单号记录,中通.圆通快递.顺丰快递等都不是问题.只需要在 爱快递(www.aikuaidi.cn)上面申请一个快递key即可,下面把源码分享下, ...
- C#快递单号查询源码
源码本人测试过,没有啥问题,能查询快递单号,支持的快递还挺多,圆通快递.申通快递.韵达快递的都支持单号查询的,程序是通过向爱快递(www.aikuaidi.cn)接口传输参数来查询快递单号,我直接把代 ...
- 微信小程序实战--开发一个简单的快递单号查询
功能如图: 虽然工作中只负责小程序后台开发,但是还是小程序开发产生了浓厚的兴趣,官方文档也是超级详细了 这里就简单做一个快递单号的查询: 新建一个page: 接着就可以写wxml了.这里用一个简单的i ...
- ECSHOP和SHOPEX快递单号查询百世快递插件V8.6专版
发布ECSHOP说明: ECSHOP快递物流单号查询插件特色 本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅 ...
- ECSHOP和SHOPEX快递单号查询顺丰插件V8.6专版
发布ECSHOP说明: ECSHOP快递物流单号查询插件特色 本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅 ...
- ECSHOP和SHOPEX快递单号查询申通插件V8.6专版
发布ECSHOP说明: ECSHOP快递物流单号查询插件特色 本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅 ...
随机推荐
- js如何实现网站title的滚动效果
var text=document.title;//获得页面的标题 var timerID;//定时器 function newtext() { ...
- 2018.10.08 NOIP模拟 栅栏（树状数组+rand）
传送门 今天的送分题. 首先考虑每次给要围上栅栏的矩阵里的整体加上1,如果栅栏被撤销就整体减1,最后比较两个点的值是否相同来进行判断. 然而这样的效果并不理想,很容易卡掉. 进一步思考,我们第iii次 ...
- java常用设计模式一：单例模式
1.饿汉式 package singleton.demo; /** * @author Administrator * @date 2019/01/07 */ public class Single ...
- Python网络编程总结
----learn from luffycity---- 1. 什么是C/S架构? C指的是client(客户端软件),S指的是Server(服务端软件),C/S架构就是基于网络实现客户端与服务端通信 ...
- java编程规范-阿里
- file.write(str),file.writelines(sequence)
file.write(str)的参数是一个字符串,就是你要写入文件的内容.file.writelines(sequence)的参数是序列,比如列表,它会迭代帮你写入文件.
- LDA汇总
1.Blei的LDA代码(C):http://www.cs.princeton.edu/~blei/lda-c/index.html2.D.Bei的主页:http://www.cs.princeton ...
- # 20155204 2016-2017-2 《Java程序设计》第五周学习总结
20155204 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 Java中所有错误都会被打包为对象,运用try.catch,可以在错误发生时显示友好的错误信 ...
- C实现一个NTP客户端，可以从指定IP的NTP服务器获取时间戳
参考::https://blog.csdn.net/dosthing/article/details/81588219 下面的代码测试通过 头文件 #include <sys/types.h&g ...
- codeforces 261B Maxim and Restaurant(概率DP)
B. Maxim and Restaurant time limit per test 2 seconds memory limit per test 256 megabytes input stan ...