原生JS和jQuery分別使用jsonp來取得'當前天氣資訊”-js教程-PHP中文網

首頁

web前端

js教程

原生JS和jQuery分別使用jsonp來取得'當前天氣資訊”

不言

Jul 05, 2018 pm 05:44 PM

這篇文章主要介紹了關於原生JS和jQuery分別使用jsonp來獲取“當前天氣信息”，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

需掌握的技能點：

　　jsonp、跨域相關等。

　　以下兩種程式碼，皆可直接運作。

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>

以上就是本文的全部內容，希望對大家的學習有所幫助，更相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

PHP教程

1592

276

Related knowledge

在打字稿中的高級條件類型 Aug 04, 2025 am 06:32 AM

TypeScript的高級條件類型通過TextendsU?X:Y語法實現類型間的邏輯判斷，其核心能力體現在分佈式條件類型、infer類型推斷和復雜類型工具的構建。 1.條件類型在裸類型參數上具有分佈性，能自動對聯合類型拆分處理，如ToArray得到string[]|number[]。 2.利用分佈性可構建過濾與提取工具：Exclude通過TextendsU?never:T排除類型，Extract通過TextendsU?T:never提取共性，NonNullable過濾null/undefined。 3

微觀前端體系結構：實施指南 Aug 02, 2025 am 08:01 AM

Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1)Chooseanintegrationstrategy:useModuleFederationinWebpack5forruntimeloadingandtrueindependence,build-timeintegrationforsimplesetups,oriframes/webcomponents

Jul 26, 2025 am 07:52 AM

要獲取JavaScript數組的長度，可以使用內置的length屬性。 1.使用.length屬性可返回數組中元素的數量，例如constfruits=['apple','banana','orange'];console.log(fruits.length);//輸出：3；2.該屬性適用於包含字符串、數字、對像或數組等任何類型數據的數組；3.length屬性會自動更新，當添加或刪除元素時其值隨之變化；4.它返回基於零的計數，空數組的length為0；5.可手動修改length屬性來截斷或擴展數組，

JavaScript中的VAR，LET和CONST之間有什麼區別？ Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

了解JavaScript的代理並反映API Jul 26, 2025 am 07:55 AM

Proxy和ReflectAPI是JavaScript中用於攔截和自定義對像操作的強大工具；1.Proxy通過包裝目標對象並定義“陷阱”來攔截如get、set等操作，實現如日誌、驗證、只讀控制等功能；2.Reflect提供與Proxy陷阱對應的方法，確保默認行為的一致性和正確性，提升代碼可維護性；3.實際應用包括Vue3響應式系統、數據驗證、調試日誌、不可變對象和API模擬；4.使用時需注意性能開銷、內置對象的複雜行為、this綁定問題及嵌套對象需遞歸代理；5.合理使用可構建高效、可調試、反應式

生成可解的雙巧克力謎題：數據結構與算法指南 Aug 05, 2025 am 08:30 AM

本文深入探討瞭如何為“雙巧克力”（Double-Choco）謎題遊戲自動生成可解謎題。我們將介紹一種高效的數據結構——基於2D網格的單元格對象，該對象包含邊界信息、顏色和狀態。在此基礎上，我們將詳細闡述一種遞歸的塊識別算法（類似於深度優先搜索），以及如何將其整合到迭代式謎題生成流程中，以確保生成的謎題滿足遊戲規則，並具備可解性。文章將提供示例代碼，並討論生成過程中的關鍵考量與優化策略。

什麼是JS中的可選鏈接（？）？ Aug 01, 2025 am 06:18 AM

可選的（？。）InjavascriptsafelyAcccessesnestedPropertiesByRoturningUndUndEfendEfinefinefinefineFanifThainisNullOrundEffined，deskingruntimeErrors.1.itallowssafealowssafeccesstodeeplynestedobjectedobjectproperties

如何使用JavaScript從DOM元素中刪除CSS類？ Aug 05, 2025 pm 12:51 PM

使用JavaScript從DOM元素中刪除CSS類最常用且推薦的方法是通過classList屬性的remove()方法。 1.使用element.classList.remove('className')可安全刪除單個或多個類，即使類不存在也不會報錯；2.替代方法是直接操作className屬性並通過字符串替換移除類，但易因正則匹配不准確或空格處理不當引發問題，因此不推薦；3.可通過element.classList.contains()先判斷類是否存在再刪除，但通常非必需；4.classList

See all articles

原生JS和jQuery分別使用jsonp來取得'當前天氣資訊”

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題