效果图
PHP部分
<?php
sleep(2);
$type = $_GET['type'];
$postid = $_GET['postid'];
$url="http://www.kuaidi100.com/query?type={$type}&postid={$postid}";
//模拟get请求
echo file_get_contents($url);
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='../jquery.js'></script>
</head>
<body>
请选择物流公司：
<select name='type'>
<option value=''>请选择物流公司</option>
<option value='shentong'>申通</option>
<option value='yuantong'>圆通</option>
<option value='zhongtong'>中通</option>
<option value='yunda'>韵达</option>
<option value='shunfeng'>顺丰</option>
</select>
请输入物流号：<input type="text" name='postid'>
<button id="btn">查物流</button>
<div id="result">
</div>
</body>
<script type="text/javascript" src="./layer/layer.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
//获取物流公司和物流号
var type = $("select[name='type']").val();
var postid = $("input[name='postid']").val();
if(type == '' || postid == ''){
//alert('请选择物流公司或输入物流号');
//提示层
layer.msg('请选择物流公司或输入物流号',{
time:2000
});
return; //直接退出，不发送无用请求
}
//发送之前给个loading提
//loading层
var index = layer.load(1, {
shade: [0.5,'#666'], //0.1透明度的白色背景
shadeClose:false
});
//情况结果信息
$("#result").html('');
$.get('kuaidi100.php',{"type":type,"postid":postid},function(result){
layer.close(index); //关闭loading提示效果
//等于200，说明有物流信息
if(result.status == '200'){
var html = '';
var wuliuData = result.data;
for(var i=0,length=wuliuData.length; i<length; i++){
//拼接物流时间和地点
html += "<p>时间："+wuliuData[i].ftime+"，地点："+wuliuData[i].context+"</p>"
}
//把html写在id=result中去
$("#result").html(html);
}else{
//alert(result.message);
//提示层
layer.msg(result.message);
}
},'json');
});
</script>
</html>
注意:使用layer弹出层插件完善物流查询
网址:<u>http://layer.layui.com/</u>
网友评论