天氣查詢---利用tornado 前端後臺資料的互動

阿新 • • 發佈：2019-01-20

資料介面在juhe.cn，有介面，其實理論上就可以呼叫任何可以得到的資料。

因為查詢天氣需要兩次資料互動，但是我希望的是選擇省份之後自動出來城市列表，又沒有學過ajax，這可費了勁了，查了半天資料，可算出來了。

直接貼碼：

開啟的頁面，可以選擇城市，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查詢天氣</title>
    <script src="static/js/jquery-3.2.1.js"></script>
</head>
<body>
    <div>
        <form action="/show" method="post">
            <p>
                選擇省份:
                <select name="province_id" id="province_id" onchange="getValue()">
                    {% for p_res in province_result %}
                    <option value="{{p_res['id']}}">{{p_res["province"]}}</option>
                    {% end %}
                </select>
            </p>
            <p>
                選擇城市:
                <select name="city_id" id="city_id">
                    {% for c_res in city_result %}
                    <option value="{{c_res['id']}}">{{c_res["city_name"]}}</option>
                    {% end %}
                </select>
            </p>
            <script type="text/javascript">
                function getValue(){
                    var str = $("#province_id option:selected").val();   //獲得選中的值
                    $.ajax({
                        type:"post",
                        dataType:"json",
                        url:"/",
                        data:{'select':str},
                        success:function(data){
                            var jsonData = JSON.parse(data); //jsonData是該下路下的所有區間（json格式）
                            jdata = jsonData["result"]
                            var sel = document.getElementById("city_id");
                            sel.length = 0;
                            for (var i = 0; i < jdata.length; i++) {
                                var option = new Option(jdata[i]["city_name"], jdata[i]["id"]);
                                sel.options.add(option);
                            }
                        }
                    });
                }
            </script>
            <p>weather_date <input type="text" name="weather_date"></p>
            <input type="submit" value="查詢">
        </form>
    </div>
</body>
</html>

Tornado的後臺操作類：

class IndexHandler(RequestHandler):
    def get(self, *args, **kwargs):
        province_result = {"result": []}
        city_result = {"result": []}
        province_r = requests.get('http://v.juhe.cn/historyWeather/province?=&key={}'.format(KEY))
        province_res = province_r.text
        province_result = json.loads(province_res)
        self.render('query.html', province_result=province_result["result"], city_result=city_result["result"])

    def post(self, *args, **kwargs):
        itemname = self.get_argument('select')
        print(itemname)
        city_r = requests.get("http://v.juhe.cn/historyWeather/citys?province_id={}&key={}".format(itemname, KEY))
        city_res = city_r.text
        print(city_res)
        self.write(json.dumps(city_res))


class ShowHandler(RequestHandler):
    def get(self, *args, **kwargs):
        pass

    def post(self, *args, **kwargs):
        city_id = self.get_body_argument('city_id', None)
        weather_date = self.get_body_argument('weather_date', None)
        r = requests.get('http://v.juhe.cn/historyWeather/weather?city_id={}&weather_date={}&key={}'.format(city_id, weather_date, KEY))
        res = r.text
        result = json.loads(res)

        self.render('show.html', weather=result['result'])

這樣就能得到結果了，感覺有了ajax好方便的樣子！

關鍵點：

第一次資料互動時使用ajax將資料交給後臺，後臺操作完成後通過write方法返回json字串，然後js再操作json字串得到希望的結果。

這裡面有個小坑，每次新建option之前，需要有一個清空列表的語句，

OBJ.length = 0

，這是一個神奇的存在，length直接就把select下面的所有option都刪除了，如果等於1就留第一條資料。

天氣查詢---利用tornado 前端後臺資料的互動

資料介面在juhe.cn，有介面，其實理論上就可以呼叫任何可以得到的資料。因為查詢天氣需要兩次資料互動，但是我希望的是選擇省份之後自動出來城市列表，又沒有學過ajax，這可費了勁了，查了半天資料，可算出來了。直接貼碼：開啟的頁面，可以選擇城市，<!DOCTYPE htm

利用ajax提交表單，實現資料前端後臺資料互動的完整流程演示

該演示需要用到 1 : json.jar(下載) 2 : jquery.js(下載) 流程演示：1.點選“登入”按鈕，傳參到後臺 2.後臺獲取資料，處理分析資料，利用JSO

淺談web前端與後臺資料互動

1.什麼是web伺服器？伺服器：通俗理解，一臺24小時工作的機器 web伺服器：一臺24小時工作的能處理web請求的伺服器看圖，用例項說話 2.web伺服器的作業系統既然伺服器是一臺機器，那麼就會有作業系統常見的伺服器上安裝的作業系

web前端與後臺資料互動

1.前端請求資料URL由誰來寫? 在開發中,URL主要是由後臺來寫的,寫好了給前端開發者.如果後臺在查詢資料,需要藉助查詢條件才能查詢到前端需要的資料時,這時後臺會要求前端提供相關的查詢引數，這裡的查詢引數也就是URL請求的引數。 2.介面文件主要由誰來寫? 介面文件也是主

Django前端與後臺資料互動:用json傳輸資料到javascript來畫hichart圖表

前端和後臺的資料傳輸是個很重要的環節.專案需要把資料用hichart顯示出來,就涉及到Django後臺傳輸資料到javascript的問題. 因為圖表比較多,javascript部分寫到單獨的js檔案裡,不寫在html檔案裡,在html中呼叫js檔案. 網上

前端和後臺資料互動總結

web伺服器應用程式：apache，tomcat，nodeJs、Nginx、IIS、後臺語言:php，java，.net，nodeJS 資料庫:Mysql，SqlServer，Oracle 後臺mvc：ssh ssm 前臺mvc：js ，jsp 資料互動：a

運營實操｜如何利用微信後臺資料優化微信運營

本文轉自知乎作者：蘇格蘭折耳喵 ————————————————————————————————————————————————————— 本文將從運營本公眾號的定位和內容初始化出發，再過渡到資料優化部分，重點闡述如何根據微信後臺資料分析

vue-cli與後臺資料互動增刪改查

1. 安裝vue-resource npm install vue-resource --save 2.訪問後臺地址，在vue中會出現跨域的問題，以下為解決方案　　在config下的index.js 中配置proxyTable代理設定 proxyTable: {

【微信小程式】微信小程式掉進的坑之與後臺資料互動

一、與後臺的資料互動注：服務端語言為Java. 在進行資料互動時，用的是Servlet進行資料的獲取和回傳。在小程式中提交引數時需要在header寫入 header: {

微信小程式wx.request後臺資料互動

From：http://blog.csdn.net/a61595579/article/details/53404451 記錄微信小程式wx.request這個api在跟後臺互動時遇上的問題。 1、根據資料，完成第一步，請求傳送，程式碼如下： [javascript] view plain

微信小程式學習筆記（三）表單提交、PHP後臺資料互動

【form表單提交】 form.wxml： <form bindsubmit="formSubmit" bindreset="formReset"> <view> 暱稱：<input type="text" name="nic

js前臺與後臺資料互動-前臺調後臺

　　網站是圍繞資料庫來程式設計的，以資料庫中的資料為中心，通過後臺來操作這些資料，然後將資料傳給前臺來顯示出來（當然可以將後臺程式碼嵌入到前臺）。即：　　　　下面就講前臺與後臺進行資料互動

使用原生ajax與後臺資料互動

//html 非完整，只包含必要元素<script>function torun(a) { var id=a.id; var url="test/?typecode="+id; var xmlhttp=new XMLHttpRequest()

使用Echarts總結之——使用柱狀圖和地圖與後臺資料互動

一、引入js 當然首先肯定是要引入相關的echart, 簡單的開發基本上一個<script language="javascript" type="text/javascript" src="$

前端後臺資料操作經驗記錄一

場景：臨近離職的一段時間接觸到一個小功能，如下圖所示新增一個複選框checkbox，當勾上時，將明細裡面的訂單號寫到開票備註裡面去。並且訂單號不要重複，重複就沒有意義了。那麼問題就來了：我是要

vue.js與後臺資料互動

第一步：引入js庫： <script src="../js/common/vue.min.js"></script> <script src="../js/commo

Salesforce LWC學習(五) LDS & Wire Service 實現和後臺資料互動 & meta xml配置

之前的幾節都是基於前臺變數進行相關的操作和學習，我們在專案中不可避免的需要獲取資料以及進行DML操作。之前的內容中也有提到wire註解，今天就詳細的介紹一下對資料進行查詢以及DML操作以及Wire Service相關的知識。一. LDS 學習LDS以前可以先看一下aura中LDS的概念salesforce

利用Ajax實現前端與.net後端實現資料互動

使用場景和需求：使用者在位址列輸入請求地址，先.net伺服器傳送頁面請求，該頁面包含Echart圖表，在頁面中向.net後端傳送資料請求，獲取資料後，將資料填充到Echart圖表中。其中包含帶參與不帶參的請求方式。不帶引數的請求例子。假設使用者訪問的URI為/HomeEx/ResidentEndowmen

微信小程式之前端與java後臺進行資料互動

最近小程式挺火的，準備寫個小程式試試，我會將我遇到的問題和我認為有用的記錄下來，但是隻瞭解java，並不太懂PHP,雖然說語言都是相通的（我也不知道誰說的）,反正還是用Java寫後臺吧，1.申請伺服器+域名3.準備使用ssm框架進行後臺開發，先進行前端後臺資料互動試試後臺ja

使用ajax完成python flask前端與後臺資料的互動

一、前端頁面中 html檔案中： {% extends 'base.html' %} {% block scripts %} {{ super() }} {# <script src="http://echarts.baidu.com/dist/echa

天氣查詢---利用tornado 前端後臺資料的互動

相關推薦