JQ应用天气预报API接口

分享一个用jq AJAX调用天气预报接口的应用。
为了样式好看点，在这里花几分钟写个样式：

<style>
            *{
                margin: 0;
                padding: 0;
            }
            .div{
                width: 250px;
                height: 30px;
                background-color: #e4393c;
            }
            #inp{
                width: 200px;
                height: 22px;
                margin-top: 3px;
                margin-left: 2px;
                border: none;
                outline: none;
            }
            #btn{
                width: 40px;
                height: 24px;
                margin-top: 2px;
                background-color: #E4393C;
                border: none;
                color: #fff;
            }
        </style>

<div class="div">
                <input type="text" id="inp"/>
                <input type="button" id="btn" value="查询"/>
            </div>
            <div class="show"></div>

 

 

 

 

贴上我们的jq代码：

$(function(){
                $("#btn").click(function(){
                $phone = $("#inp").val();
                console.log($phone)
                $.ajax({
                    type:"get",
                    url:"http://apis.baidu.com/netpopo/shouji/query?shouji="+$phone,
                    async:true,
                    dataType:"json",
                    beforeSend:function(XMLHttpRequest){
                        var sessionid = "SessionID";
                        XMLHttpRequest.setRequestHeader("apikey","84f53877128c482353fc63eeb4473a60")
                    },
                    success:function(data){
                        console.log(data);
                        var str = "";
                        str+="<li>"+data.result.shouji+"</li>";
                        str+="<li>"+data.result.province+"</li>";
                        str+="<li>"+data.result.city+"</li>";
                        str+="<li>"+data.result.company+"</li>";
                        $(".div")[0].innerHTML+=str;
                    }
                    
                });
                })
            })