个人中心
gpt4 book ai didi

javascript - 单击 "Submit"按钮获取值时访问元素

转载 作者：行者123 更新时间：2023-11-28 01:14:16 26 4
gpt4 key购买 nike

这是来自 https://developer.forecast.io/docs/v2 的一个很好的例子

我想做的和尝试的是:

我有一个简单的网页，我想在其中显示当前预报和扩展预报。

这是我的 Index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en" class="no-js" ng-app="myApp">
    <head>
        <title>Weather Forecaster</title>
        <meta charset="UTF-8">
        <!-- favicon -->
        <link rel="shortcut icon" href="images/Oxygen-Icons.org-Oxygen-Status-weather-clear.ico" />
        <!-- END favicon -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link href="css/jquery.jdigiclock.css" rel="stylesheet" type="text/css" />
        <link href="css/wx-custom.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
    </head>
    <body ng-controller="wxController as ctrlWx">
        <div class="container">
            <div class="row">
                <div class="col-10">
                    <div id="my-div" ng-model="myiFrame">
                        <iframe src="http://www.latlong.net/convert-address-to-lat-long.html" id="my-iframe" scrolling="no"></iframe>
                    </div>
                    <div id="plugin_container" class="forecast-panel">
                        <h1>Here's Today's Weather</h1>
                        <div class="fc forecast-panel1">
                            <p class="dayTitle">Day 1</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel2">
                            <p class="dayTitle">Day 2</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel3">
                            <p class="dayTitle">Day 3</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel4">
                            <p class="dayTitle">Day 4</p>
                        </div>
                        <div class="spacer"></div>
                        <div class="fc forecast-panel5">
                            <p class="dayTitle">Day 5</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/angular/angular.min.js" type="text/javascript"></script>
        <script src="js/angular/app.js" type="text/javascript"></script>
        <script src="js/angular/controller.js" type="text/javascript"></script>
        <script src="js/angular/services.js" type="text/javascript"></script>
        <script src="js/angular/ang-custom.js" type="text/javascript"></script>
    </body>
</html>

注意“IFRAME”...... src 是这样的:http://www.latlong.net/convert-address-to-lat-long.html

现在，如果你去那里，这很酷，你可以输入任何地址来获取该地址的 LAT LON:

这是一个屏幕截图，其中包含华盛顿特区的 LAT LON 示例......白宫。

Example of my project

好的，现在，我的代码使用带有简单 Controller 和服务的 Angular...

这里:

应用程序:

/* global angular */
// Code goes here
var myApp;
myApp = angular.module("myApp", []);
myApp.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});
console.log("Host name is: " + document.location.hostname);
//if (document.location.hostname === "localhost") {
//    myApp.constant('URL', '/WeatherForecaster/js/json/');
//} else if (document.location.hostname === "omnimanger.co/wx" || "www.omnimanager.co/wx") {
//    myApp.constant('URL', '/js/json/');
//} else {
//    myApp.constant('URL', '/wx/js/json/');
//}
myApp.constant("URL", {
   //Default LAT/LON for CONCRETE 
   apiKey: "3bb0f0fe93c92922f0b42f9eabda48d0/",
   lat: "48.530031",
   lon: ",-121.879460",
   country: "us",
   uri: "https://api.forecast.io/forecast/"
}).config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});;

myApp.constant("wx", {
    data: {
        latitude: 0,
        longitude: 0,
        currently: {},
        minutely: {
            summary: "",
            icon: "",
            data: []
        },
        hourly: {
            summary: "",
            icon: "",
            data: []
        },
        daily: {
            summary: "",
            icon: "",
            data: []
        },
        flags: {
            sources: [],
            "lamp-stations": [],
            "isd-stations": [],
            "madis-stations": [],
            units: ""
        }
    }
});

Controller :

'use strict';
myApp.controller('wxController', function (wxDataService) {

    var ctrlWx = this;
    //Listen for the Submit (FIND) button on the iFrame

    ctrlWx.content = {};
    console.log("LAT/LON: ", ctrlWx.latlon);
    ctrlWx.fetchWx = function () {
        //General Data
        wxDataService.getWxData().then(function (result) {
            ctrlWx.content = result;
            console.log("All Data: ", result);
        });
    };
    ctrlWx.fetchWx();

});

服务:

myApp.factory('wxDataService', function ($http, URL) {

    console.log("URL", URL);

        //DEFAULT Headers for KEY and AUTH TOKEN
    var headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': ['GET', 'POST'],
        'Access-Control-Allow-Headers': 'Content-Type',
        'Content-Type': 'application/json'
    };
    var myURL = {
        data: {
            header: headers,
            uri: URL.uri + URL.apiKey + URL.lat + URL.lon
        }
    };

    var getWxData = function () {
        return $http.get(myURL)
                .success(function (data) {
                    console.log("SUCCESS!");
                    console.log("The Weather Data is here: " + data);
                    return data;
                })
                .error(function (e) {
                    console.log("He\'s dead Jim!<br>", e);
                    return e;
                });
    };
    return {
        getWxData: getWxData
    };
});

我正在努力实现的解决方案:

当用户输入地址并单击生成 LAT LON 的“查找”按钮时，我想在 IFRAME 中捕获该 LAT LON。

这就是我想要做的，但我知道我需要制定一个指令，将“CLICK”或“SUBMIT”事件绑定(bind)到 FIND 按钮。我下面的不是那个；还没有。

var latlon = {};
$(function () {
    $('#my-iframe').load(function () {

        $(this).contents().find("#latlongform, #gadres").live('blur', function (e) {
            latlon = {
                mylat: $("input[name='lat']").val(),
                mylon: $("input[name='lon']").val()
            };
            if (e) {
                console.log("Err: ", e);
                return e;
            }
        });
    });
});

吉文斯:

FORM和LAT LON如下:

    <div class="row">
        <div class="col-8 graybox">
            <form id="latlongform">
                <label for="gadres">Address</label>
                <input id="gadres" type="text" class="width70" placeholder="Type address here to get lat long" required="">
                <button title="Find lat long coordinates" class="button">Find</button><br>
                <small>Write city name with country code for better results.</small>
            </form>
            <div class="row">
                <div class="col-6 m2">
                    <label for="lat">Latitude</label>
                    <input type="text" name="lat" id="lat" placeholder="lat coordinate">
                </div>
                <div class="col-6 m2">
                    <label for="lng">Longitude</label>
                    <input type="text" name="lng" id="lng" placeholder="long coordinate">
                </div>
            </div>
        </div>
    </div>

问题:

我怎样才能得到 LAT LON，“在”用户单击“查找”之后，然后启动我的 Angular 服务以将 CALL 注入(inject)到获取天气数据的 URL 中……如前所述。这是天气数据 JSON 对象。它使用一个 API key ，我的 key 每天只能使用 1000 次。

如果您想查看天气 API 的结果，您需要获得一个免费的 API_KEY....它每天提供 1000 次点击...

谢谢大家，我希望你能回答这一切这是一个有效的问题。

最佳答案

使用 JSONP 访问 Forecast.io API

forecast.io 网站不支持 GET 操作的 CORS(跨源资源共享)，但它支持 JSONP。

修改后的代码

var url = myURL.data.uri;
var jsonpURL = url+"?callback=JSON_CALLBACK";

var getWxData = function () {
    return $http.jsonp(jsonpURL)
        .then(function (response) {
            console.log("SUCCESS!");
            console.log(response.data);
            //return to chain data
            return response.data;
        })
        .catch(function (e) {
            console.log("He\'s dead Jim!");
            console.log(e);
            //throw to chain rejection
            throw e;
        });
};

示例结果

LAT: 48.530031
LOG: -121.87946
TIMEZONE: America/Los_Angeles
SUMMARY: Partly Cloudy
TEMP: 56.02

DEMO on JSFiddle .

请注意，我将 .success 和 .error 方法分别更改为 .then 和 .catch。那些旧方法是 deprecated并忽略返回值。

关于javascript - 单击 "Submit"按钮获取值时访问元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36375523/

26 4 0
文章推荐： javascript - Coffeescript 类变量字段 - 保持初始化干净
文章推荐： c# - 如何在ascx文件中组合两个变量
文章推荐： javascript - 如何使用 Firefox addons sdk 的 getThumbnail() Tab API 获取当前选项卡的全宽屏幕截图
文章推荐： javascript - 如何创建一棵 promise 树？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com