ajax請求網絡api

轉載自：javascript

https://www.cnblogs.com/kudsu/p/9620726.htmlhtml

囉嗦，直接上代碼：java

一、在瀏覽器輸入網址：http://api.asilu.com/weather/?callback=getname&city=深圳jquery

你會看到以下結果：他返回的是json數據ajax

/** api.asilu.com **/getname({"city":"深圳","pm25":"28","weather":[{"date":"週一 09月10日","icon1":"day\/duoyun","icon2":"night\/duoyun","weather":"多雲","wind":"無持續風向微風","temp":"31 ~ 25℃"},{"date":"週二","icon1":"day\/duoyun","icon2":"night\/duoyun","weather":"多雲","wind":"無持續風向微風","temp":"31 ~ 27℃"},{"date":"週三","icon1":"day\/leizhenyu","icon2":"night\/leizhenyu","weather":"雷陣雨","wind":"東風4-5級","temp":"31 ~ 26℃"},{"date":"週四","icon1":"day\/zhenyu","icon2":"night\/zhenyu","weather":"陣雨","wind":"東風3-4級","temp":"30 ~ 26℃"}],"date":"2018-09-10","id":"101280601","t":1536508800});

整理以後是這樣的：json

/** api.asilu.com **/
getname({
    "city": "深圳",
    "pm25": "28",
    "weather": [{
        "date": "週一 09月10日",
        "icon1": "day\/duoyun",
        "icon2": "night\/duoyun",
        "weather": "多雲",
        "wind": "無持續風向微風",
        "temp": "31 ~ 25℃"
    }, {
        "date": "週二",
        "icon1": "day\/duoyun",
        "icon2": "night\/duoyun",
        "weather": "多雲",
        "wind": "無持續風向微風",
        "temp": "31 ~ 27℃"
    }, {
        "date": "週三",
        "icon1": "day\/leizhenyu",
        "icon2": "night\/leizhenyu",
        "weather": "雷陣雨",
        "wind": "東風4-5級",
        "temp": "31 ~ 26℃"
    }, {
        "date": "週四",
        "icon1": "day\/zhenyu",
        "icon2": "night\/zhenyu",
        "weather": "陣雨",
        "wind": "東風3-4級",
        "temp": "30 ~ 26℃"
    }],
    "date": "2018-09-10",
    "id": "101280601",
    "t": 1536508800
});

二、怎樣才能獲取上述json的數據呢？很簡單：api

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <h1>天氣查詢</h1>
    <input type="text" placeholder="請輸出你的地址" id="tel"/>
    <button id="ajax">肯定</button>
    <p><span id="reslut"></span></p>
    <script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#ajax').on('click',function(){
            var $telValue=$('#tel').val();
            if($telValue=="") {
                alert('不能爲空！');
                return;
            }
            $.ajax({
                type: 'GET',
                dataType:'jsonp',
                url: 'http://api.asilu.com/weather/?callback=getname&city='+$telValue,
                success: function(data){
                    var reslutData=data;
                    console.log(reslutData);    
                    $('#reslut').text("你查詢的是:"+reslutData.city+","+"明天的天氣是:"+reslutData.weather[0].weather);
                }             
            })
        })       
    })
    </script>
</body>
</html>