ケーススタディ:ajaxドメイン間呼び出し気象インタフェース

28398 ワード
AJAX 先端 JavaScript
jQueryパッケージを参照する必要がある右クリック保存ダウンロードjQuery-3.4.1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>    -hao360  </title>
    <link rel="stylesheet" href="css/weather.css">
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 
        1.       ，                  
        2.  Jsonp   ，  <script>  ，        ，  AJAX  
            //2.1 btn click   ，     Jsonp      </span>
     <span class="token operator">--</span><span class="token operator">></span>
    <span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
        <span class="token comment">//      </span>
        <span class="token keyword">function</span> <span class="token function">callback</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{
     </span>
            <span class="token comment">//1.  data              </span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#wtInfo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//         </span>
            <span class="token keyword">var</span> wt <span class="token operator">=</span> data<span class="token punctuation">.</span>weather<span class="token punctuation">;</span>
            <span class="token comment">//2.    5 li  ，        li   </span>
            $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>wt<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>i<span class="token punctuation">,</span> e<span class="token punctuation">)</span> <span class="token punctuation">{
     </span>
                <span class="token keyword">var</span> date <span class="token operator">=</span> e<span class="token punctuation">.</span>date<span class="token punctuation">;</span>
                <span class="token keyword">var</span> day <span class="token operator">=</span> e<span class="token punctuation">.</span>info<span class="token punctuation">.</span>day<span class="token punctuation">;</span>
                <span class="token keyword">var</span> night <span class="token operator">=</span> e<span class="token punctuation">.</span>info<span class="token punctuation">.</span>night<span class="token punctuation">;</span>
                <span class="token comment">//     </span>
                <span class="token keyword">var</span> tag <span class="token operator">=</span> <span class="token string">'<li>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<h2>'</span> <span class="token operator">+</span> date <span class="token operator">+</span> <span class="token string">'</h2>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<div class="day">'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<h3>    </h3>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> day<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> day<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> day<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> day<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'</div>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<div class="night">'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<h3>    </h3>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> night<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> night<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> night<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'<p>  ：'</span> <span class="token operator">+</span> night<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span>
                tag <span class="token operator">+=</span> <span class="token string">'</div>'</span><span class="token punctuation">;</span>
                <span class="token comment">//3.    li     ul </span>
                <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#wtInfo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span>
        <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{
     </span>
            <span class="token comment">//    btn    </span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#btn'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{
     </span>
                <span class="token comment">//1.       ID</span>
                <span class="token keyword">var</span> cityCode <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#selCity option:selected'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token comment">//2.     URL</span>
                <span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token string">'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code='</span> <span class="token operator">+</span> cityCode<span class="token punctuation">;</span>
                <span class="token comment">//3.              <script>  ，    jsonp   ，            </span>
                <span class="token keyword">var</span> tag <span class="token operator">=</span> <span class="token string">'<script src='</span> <span class="token operator">+</span> url <span class="token operator">+</span> <span class="token string">'>'</span><span class="token punctuation">;</span>
                <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>

<span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"wt_container"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"city"</span><span class="token operator">></span>
            <span class="token operator"><</span>select id<span class="token operator">=</span><span class="token string">"selCity"</span><span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101180201"</span><span class="token operator">></span>   <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101010100"</span><span class="token operator">></span>  <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101180101"</span><span class="token operator">></span>  <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101250101"</span><span class="token operator">></span>  <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101050101"</span><span class="token operator">></span>   <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101130101"</span><span class="token operator">></span>    <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
                <span class="token operator"><</span>option value<span class="token operator">=</span><span class="token string">"101280101"</span><span class="token operator">></span>  <span class="token operator"><</span><span class="token operator">/</span>option<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>select<span class="token operator">></span>
            <span class="token operator"><</span>button id<span class="token operator">=</span><span class="token string">"btn"</span><span class="token operator">></span>    <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"weather"</span><span class="token operator">></span>
            <span class="token operator"><</span>ul id<span class="token operator">=</span><span class="token string">"wtInfo"</span><span class="token operator">></span>

            <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>

<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>

<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1395086241023709184"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
興味があるかもしれません
Enumの使い方
物心の知れないおなら
enum
【Spark九十七】RDD APIのaggregateByKey
bit1129
spark
hive作成テーブルはエラーです:Specified key was too long;max key length is 767 bytes
daizj
hive
MapとJavaBeanの変換
周凡楊
java 自省するへんかんはんしゃ
JAva接続ftpダウンロード
g21121
java
WebレポートツールFineReportの使用中に発生するよくあるエラーと解決方法(二)
Aさんは振り回さない
finereport Webレポート JAvaレポートまとめ
linuxシステムcpuメモリなどの情報表示
塀の上に草が1本ある
cpu メモリ liunx
SpringでのAOP
aijuans
spring AOP
アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号
[記録]window.locationオブジェクト実装ページリフレッシュ
ウィジェットajaxパッケージ