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快递.汇通快递.宅 ...
随机推荐
- 前端之JavaScript笔记1
一 JavaScript的引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 2018.08.18 NOIP模拟 snow（最大流）
Snow 题目背景 SOURCE:NOIP2015-SHY4 题目描述 有一天,TT 要去 ABC 家.ABC 的大门外有 n 个站台,用 1 到 n 的正整数编号,TT 需要对每个站台访问恰好一定次 ...
- angularjs写公共方法
'use strict'; angular.module('fast-westone') .factory('commonUtilService', function () { return { /* ...
- java中线程和并发面试题
http://www.cnblogs.com/dolphin0520/p/3932934.html http://www.cnblogs.com/dolphin0520/p/3958019.html ...
- 修改Python IDLE代码配色及语法高亮主题
初学Python,想必大家拿来练习最多的IDE就是Python自带的IDLE了,但是默认的代码配色及语法高亮主题确实很不适应,所以我们需要做个小小的美化,比如像下面这样我做的美化配置: HOW TO ...
- nodejs中如何使用mysql数据库[node-mysql翻译]
nodejs中如何使用mysql数据库 db-mysql因为node-waf: not found已经不能使用,可以使用mysql代替. 本文主要是[node-mysql]: https://www. ...
- DUBBO配置规则详解
研究DUBBO也已经大半年了,对它的大部分源码进行了分析,以及对它的内部机制有了比较深入的了解,以及各个模块的实现.DUBBO包含很多内容,如果想了解DUBBO第一步就是启动它,从而可以很好的使用它, ...
- Mongodb 存储日志信息
线上运行的服务会产生大量的运行及访问日志,日志里会包含一些错误.警告.及用户行为等信息,通常服务会以文本的形式记录日志信息,这样可读性强,方便于日常定位问题,但当产生大量的日志之后,要想从大量日志里挖 ...
- 在Windows 7上安装Team Foundation Server（TFS）的代理服务器（Agent)
自2009年微软发布Windows 7以来,经过8年的市场验证,Windows 7已经成为史上应用最为广泛的操作系统.但是面对技术变化的日新月异,2015年微软正式停止了对Windows 7的主流支持 ...
- 记录.NET Core部署到Linux之.NET Core环境搭建(1)
1.在安装.NET之前,您需要注册Microsoft密钥.注册产品存储库和安装所需的依赖项. 启动我们的虚拟机,输入以下命令: sudo rpm -Uvh https://packages.micro ...