ajax--json数据解析实例ems

07ems.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        #ems {
            width: 400px;
            height: 500px;
            position: absolute;
            left: 50%;
            margin-left: -200px;
            background-color: lightGreen;
            text-align: center;
            min-height: 50px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        #ems input {
            height: 25px;
            margin-top: 10px;
        }
        #list {
            background-color: lightBlue;
        }
        #list li{
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="ems">
        <div>
            <input type="text" id="code">
            <input type="button" value="查询" id="btn">
        </div>
        <div id="list"></div>
    </div>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");
            var list = document.getElementById("list");
            btn.onclick = function(){
                var code = document.getElementById("code").value;//这个位置得放到点击按钮的里面
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open('get','./07ems.php?code='+code,true);
                xhr.send(null);
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){
                            var data = JSON.parse(xhr.responseText);
                            if (data.status == 0) {
                                var listData = data.data.info.context;
                                var tag = '';
                                for(var i = 0;i<listData.length;i++){
                                    var item = listData[i];
                                    var t = new Date();
                                    t.setTime(item.time + '000');
                                    var str = t.getFullYear()+'年'+(t.getUTCMonth()+1)+'月'+t.getDay()+'日'+(t.getHours()>12?'下午':'上午')+t.getHours()%12+':'+t.getMinutes()+':'+t.getSeconds();
                                    tag += '<li><div>'+str+'</div><div>'+item.desc+'</div></li>';
                                    var ul = document.createElement("ul");
                                    ul.innerHTML = tag;
                                    list.appendChild(ul);
                                }
                            }else {
                                list.innerHTML = data.msg;
                            }
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>

07ems.php

<?php 
    $code = $_GET['code'];
    $result = '{"msg":"","status":"0","error_code":"0","data":{"info":{"status":"1","com":"yunda","state":"3","context":[{"time":"1479877688","desc":"\u5728\u5c71\u4e1c\u6d4e\u5357\u5386\u57ce\u533a\u8d5b\u535a\u516c\u53f8\u8fdb\u884c\u7b7e\u6536\u626b\u63cf\uff0c\u5feb\u4ef6\u5df2\u88ab \u5df2\u7b7e\u6536 \u7b7e\u6536"},{"time":"1479876252","desc":"\u5728\u5c71\u4e1c\u6d4e\u5357\u5386\u57ce\u533a\u8d5b\u535a\u516c\u53f8\u8fdb\u884c\u6d3e\u4ef6\u626b\u63cf\uff1b\u6d3e\u9001\u4e1a\u52a1\u5458\uff1a\u5f20\u660e\u661f\uff1b\u8054\u7cfb\u7535\u8bdd\uff1a18854142988"},{"time":"1479811469","desc":"\u4ece\u5c71\u4e1c\u6d4e\u5357\u5206\u62e8\u4e2d\u5fc3\u53d1\u51fa\uff0c\u672c\u6b21\u8f6c\u8fd0\u76ee\u7684\u5730\uff1a\u5c71\u4e1c\u6d4e\u5357\u5386\u57ce\u533a\u8d5b\u535a\u516c\u53f8"},{"time":"1479807719","desc":"\u5728\u5206\u62e8\u4e2d\u5fc3\u5c71\u4e1c\u6d4e\u5357\u5206\u62e8\u4e2d\u5fc3\u8fdb\u884c\u5378\u8f66\u626b\u63cf"},{"time":"1479664245","desc":"\u5728\u5e7f\u4e1c\u4e1c\u839e\u5206\u62e8\u4e2d\u5fc3\u8fdb\u884c\u88c5\u8f66\u626b\u63cf\uff0c\u5373\u5c06\u53d1\u5f80\uff1a\u5c71\u4e1c\u6d4e\u5357\u5206\u62e8\u4e2d\u5fc3"},{"time":"1479664039","desc":"\u5728\u5206\u62e8\u4e2d\u5fc3\u5e7f\u4e1c\u4e1c\u839e\u5206\u62e8\u4e2d\u5fc3\u8fdb\u884c\u79f0\u91cd\u626b\u63cf"},{"time":"1479658505","desc":"\u5728\u5e7f\u4e1c\u4e1c\u839e\u864e\u95e8\u516c\u53f8\u8fdb\u884c\u4e0b\u7ea7\u5730\u70b9\u626b\u63cf\uff0c\u5c06\u53d1\u5f80\uff1a\u5c71\u4e1c\u6d4e\u5357\u7f51\u70b9\u5305"},{"time":"1479651173","desc":"\u5728\u5e7f\u4e1c\u4e1c\u839e\u864e\u95e8\u516c\u53f8\u9648\u6751\u4fbf\u6c11\u5bc4\u5b58\u5206\u90e8\u8fdb\u884c\u5230\u4ef6\u626b\u63cf"}],"_source_com":"yunda","_support_from":"partner"},"com":"yunda","company":{"url":"http:\/\/www.yundaex.com?from=openv","fullname":"\u97f5\u8fbe\u901f\u9012","shortname":"\u97f5\u8fbe","icon":{"id":"27","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,400","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,576","normal":"https:\/\/ss0.baidu.com\/6ONWsjip0QIZ8tyhnq\/it\/u=996032835,1968172858&fm=58"},"website":{"title":"www.yundaex.com","url":"http:\/\/www.yundaex.com"},"tel":"95546","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.yundaex.com\/ydweb\/fuwuwangdian.php"},{"title":"\u8fd0\u4ef7\u67e5\u8be2","url":"http:\/\/www.yundaex.com\/cn\/product_yunfei.php"},{"title":"\u6211\u8981\u5bc4\u4ef6","url":"http:\/\/member.yundaex.com\/ydmb\/member\/order\/index.jsp"},{"title":"\u97f5\u8fbe\u6d77\u6dd8","url":"http:\/\/www.udamall.com\/shop\/index.php"}],"timecost":{"btn_show":"1","url":"http:\/\/www.yundaex.com\/cn\/product_yunfei.php"},"onlineorder":{"btn_show":"1","url":"http:\/\/member.yundaex.com\/ydmb\/member\/order\/index.jsp"}},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=4025691644,3226950799&fm=58","title":"\u6570\u636e\u6765\u81ea\u97f5\u8fbe\u901f\u9012","url":"http:\/\/www.yundaex.com\/?from=baidu_ala","name":"\u97f5\u8fbe\u901f\u9012","showName":"\u6570\u636e\u6765\u6e90\uff1a\u97f5\u8fbe\u901f\u9012"},"kuaidiSource":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/?from=baidu_ala","name":"\u5feb\u9012100","showName":"\u5feb\u9012100"}}}';
    if ($code == '1') { 
        echo $result;
    }else {
        echo '{"msg":"该单号暂无物流进展,请稍候再试,或检查公司和单号是否有误","status":"-2"}';
    }
?>

data.json

{
    "msg": "",
    "status": "0",
    "error_code": "0",
    "data": {
        "info": {
            "status": "1",
            "com": "yunda",
            "state": "3",
            "context": [{
                "time": "1479877688",
                "desc": "\u5728\u5c71\u4e1c\u6d4e\u5357\u5386\u57ce\u533a\u8d5b\u535a\u516c\u53f8\u8fdb\u884c\u7b7e\u6536\u626b\u63cf\uff0c\u5feb\u4ef6\u5df2\u88ab \u5df2\u7b7e\u6536 \u7b7e\u6536"
            }, {
                "time": "1479876252",
                "desc": "\u5728\u5c71\u4e1c\u6d4e\u5357\u5386\u57ce\u533a\u8d5b\u535a\u516c\u53f8\u8fdb\u884c\u6d3e\u4ef6\u626b\u63cf\uff1b\u6d3e\u9001\u4e1a\u52a1\u5458\uff1a\u5f20\u660e\u661f\uff1b\u8054\u7cfb\u7535\u8bdd\uff1a18854142988"
            }, {
                "time": "1479811469",
                "desc": "\u4ece\u5c71\u4e1c\u6d4e\u5357\u5206\u62e8\u4e2d\u5fc3\u53d1\u51fa\uff0c\u672c\u6b21\u8f6c\u8fd0\u76ee\u7684\u5730\uff1a\u5c71\u4e1c\u6d4e\u5357\u5386\u57ce\u533a\u8d5b\u535a\u516c\u53f8"
            }, {
                "time": "1479807719",
                "desc": "\u5728\u5206\u62e8\u4e2d\u5fc3\u5c71\u4e1c\u6d4e\u5357\u5206\u62e8\u4e2d\u5fc3\u8fdb\u884c\u5378\u8f66\u626b\u63cf"
            }, {
                "time": "1479664245",
                "desc": "\u5728\u5e7f\u4e1c\u4e1c\u839e\u5206\u62e8\u4e2d\u5fc3\u8fdb\u884c\u88c5\u8f66\u626b\u63cf\uff0c\u5373\u5c06\u53d1\u5f80\uff1a\u5c71\u4e1c\u6d4e\u5357\u5206\u62e8\u4e2d\u5fc3"
            }, {
                "time": "1479664039",
                "desc": "\u5728\u5206\u62e8\u4e2d\u5fc3\u5e7f\u4e1c\u4e1c\u839e\u5206\u62e8\u4e2d\u5fc3\u8fdb\u884c\u79f0\u91cd\u626b\u63cf"
            }, {
                "time": "1479658505",
                "desc": "\u5728\u5e7f\u4e1c\u4e1c\u839e\u864e\u95e8\u516c\u53f8\u8fdb\u884c\u4e0b\u7ea7\u5730\u70b9\u626b\u63cf\uff0c\u5c06\u53d1\u5f80\uff1a\u5c71\u4e1c\u6d4e\u5357\u7f51\u70b9\u5305"
            }, {
                "time": "1479651173",
                "desc": "\u5728\u5e7f\u4e1c\u4e1c\u839e\u864e\u95e8\u516c\u53f8\u9648\u6751\u4fbf\u6c11\u5bc4\u5b58\u5206\u90e8\u8fdb\u884c\u5230\u4ef6\u626b\u63cf"
            }],
            "_source_com": "yunda",
            "_support_from": "partner"
        },
        "com": "yunda",
        "company": {
            "url": "http:\/\/www.yundaex.com?from=openv",
            "fullname": "\u97f5\u8fbe\u901f\u9012",
            "shortname": "\u97f5\u8fbe",
            "icon": {
                "id": "27",
                "smallurl": "https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58",
                "smallpos": "0,400",
                "middleurl": "https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58",
                "middlepos": "0,576",
                "normal": "https:\/\/ss0.baidu.com\/6ONWsjip0QIZ8tyhnq\/it\/u=996032835,1968172858&fm=58"
            },
            "website": {
                "title": "www.yundaex.com",
                "url": "http:\/\/www.yundaex.com"
            },
            "tel": "95546",
            "auxiliary": [{
                "title": "\u7f51\u70b9\u67e5\u8be2",
                "url": "http:\/\/www.yundaex.com\/ydweb\/fuwuwangdian.php"
            }, {
                "title": "\u8fd0\u4ef7\u67e5\u8be2",
                "url": "http:\/\/www.yundaex.com\/cn\/product_yunfei.php"
            }, {
                "title": "\u6211\u8981\u5bc4\u4ef6",
                "url": "http:\/\/member.yundaex.com\/ydmb\/member\/order\/index.jsp"
            }, {
                "title": "\u97f5\u8fbe\u6d77\u6dd8",
                "url": "http:\/\/www.udamall.com\/shop\/index.php"
            }],
            "timecost": {
                "btn_show": "1",
                "url": "http:\/\/www.yundaex.com\/cn\/product_yunfei.php"
            },
            "onlineorder": {
                "btn_show": "1",
                "url": "http:\/\/member.yundaex.com\/ydmb\/member\/order\/index.jsp"
            }
        },
        "source": {
            "logo": "https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=4025691644,3226950799&fm=58",
            "title": "\u6570\u636e\u6765\u81ea\u97f5\u8fbe\u901f\u9012",
            "url": "http:\/\/www.yundaex.com\/?from=baidu_ala",
            "name": "\u97f5\u8fbe\u901f\u9012",
            "showName": "\u6570\u636e\u6765\u6e90\uff1a\u97f5\u8fbe\u901f\u9012"
        },
        "kuaidiSource": {
            "logo": "https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58",
            "title": "\u6570\u636e\u6765\u81ea\u5feb\u9012100",
            "url": "http:\/\/www.kuaidi100.com\/?from=baidu_ala",
            "name": "\u5feb\u9012100",
            "showName": "\u5feb\u9012100"
        }
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值