ホームページ  >  記事  >  ウェブフロントエンド  >  Native JSとjQueryはそれぞれjsonpを使用して「現在の天気情報」を取得します

Native JSとjQueryはそれぞれjsonpを使用して「現在の天気情報」を取得します

不言
不言オリジナル
2018-07-05 17:44:421668ブラウズ

この記事では、「現在の天気情報」を取得するためのネイティブ JS と jQuery による jsonp の使用方法を主に紹介します。必要な友人はそれを参照できるようにします。

習得すべきスキル ポイント:

jsonp、クロスドメイン相関など。

次の2つのコードは直接実行できます。

1. ネイティブ JS を使用する:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <p id="cur_year"></p>
    <p id="iciba_ds"></p></body></html><script type="text/javascript">
    document.getElementById("cur_year").innerHTML =new Date();    function data(data){        //遍历
        var description = "";        for(var i in data.result){            var property=data.result[i];
            description+=i+" = "+property+"<br />";
        }
        document.write(description);
    }</script><script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=412&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data"></script>

2. jquery を使用する:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                type          : &#39;get&#39;,
                async         : false,
                url           : &#39;http://api.k780.com/?app=weather.today&weaid=412&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data&#39;,
                dataType      : &#39;jsonp&#39;,
                jsonp         : &#39;callback&#39;,
                jsonpCallback : &#39;data&#39;,
                success       : function(data){                    if(data.success!=&#39;1&#39;){
                        alert(data.msgid+&#39; &#39;+data.msg);
                        exit;
                    }                    //遍历
                    var description = "";                    for(var i in data.result){                        var property=data.result[i];
                        description+=i+" = "+property+"<br />";
                    }
                    document.write(description);
                },
                error:function(){
                    alert(&#39;fail&#39;);
                }
            });
        });    </script></head><body></body></html>

その他の関連コンテンツについては、この記事の内容を参照してください。中国語のサイトです!

関連する推奨事項:

js は、単純なクリック画像のループ再生を実装します

JavaScript のゲッターとセッターの紹介

URL を JSON 形式に変換します

以上がNative JSとjQueryはそれぞれjsonpを使用して「現在の天気情報」を取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。