angularjs實現查詢天氣的小案例(跨域請求)

阿新 • • 發佈：2019-02-09

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      
        .box {
        	position: relative;
        	width: 600px;
        	height: 400px;
        	margin: 0 auto;
        }
        .chaxun {
        	background-color: rgba(255,255,255,0.1);
        	position: absolute;
        	top:30px;
        	left: 50px;
        	/*float: left;*/
        }
        .bgimg {
        	width: 600px;
        }
	</style>

</head>
<body ng-app="App">
	
	<div ng-controller="WeatherController" class="box" >
	<img src="images/n-bg1.jpg" class="bgimg">
	<div class="chaxun">
		 <input type="text" ng-model="text">
	    <button ng-click="cha()">查詢當前位置天氣</button>
		<table>
			<!-- 檢視 -->
			<p>當前時間是：{{time|date:'yyyy-MM-dd hh:mm:ss'}} 
</p>
			<tr ng-repeat="item in weatherData">
			   <!-- <p>你的位置:{{currentCity}}</p> -->
				<td>{{item.date}}</td>
				<td><img ng-src="{{item.dayPictureUrl}}" alt=""></td>
				<td><img ng-src="{{item.nightPictureUrl}}" alt=""></td>
				<td>{{item.temperature}}</td>
				<td>{{item.weather}}</td>
				<td>{{item.wind}}</td>
			</tr>
		</table>
	</div>
	  </div> 
	<script src="js/angular.min.js"></script>
	<script>
		var App = angular.module('App', []);
		// 定義控制器並宣告依賴
		App.controller('WeatherController', ['$scope', '$http', '$interval', function($scope, $http, $interval) 
 {
			// 頁面顯示當前時間
			$interval(function(){
				$scope.time = new Date();
			},1000);
			// 查詢各個城市的天氣
			$scope.text = '吉林';//初始化輸入框的引數
			$scope.cha = function(){
				$http({
				method: 'jsonp', // 支援jsonp,
				url: 'http://api.map.baidu.com/telematics/v3/weather?callback=JSON_CALLBACK',
				params: { // 請求的引數
					location: $scope.text,
					output: 'json',
					ak: '0A5bc3c4fb543c8f9bc54b77bc155724'
				}
			}).success(function (data) 
 {
				// 請求回的資料放到模型上
				$scope.currentCity = data.results[0].currentCity;
				$scope.weatherData = data.results[0].weather_data;
			});

			}
			

		}]);
		
     

	</script>
</body>
</html>

angularjs實現查詢天氣的小案例(跨域請求)

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="

利用JQuery實現更簡單的Ajax跨域請求

<html><head><title>JQuery學習</title><script src="jquery-1.2.6.min.js" type="text/javascript"></script><script type="t

解決angularjs使用iframe載入網址的跨域請求

如何通過CORS跨域請求實現聊天小AI

聊天機器人github地址：https://github.com/Neekky/chatting-robot CORS跨域解決方案 CORS（跨源資源共享）通過新增一系列 HTTP 頭，讓伺服器能宣告哪些來源可以通過瀏覽器訪問該伺服器上的資源。對於 GET 以外的 HTTP

angularJS實現跨域請求

一直都用Jsonp的方式來解決angularjs跨域問題，查詢讀取資訊還可以。如果是遇到比如登陸，需要post使用者資訊的，這個時候必須要用到post方式。 service端配置，post資料的介面處加上下面程式碼： header('Access-Contr

利用jsonp實現跨域請求

get p地址 doc ajax請求 -s tar 原理安全策略都是　　同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來百

ajax獲取json數據及實現跨域請求

cgi size 域名 3.2 方便 nap 不清楚 anti dex 最近想練習一下ajax獲取json數據 , 首先上網找一些在線的可用來測試的接口. -----------------------------------------------------這裏是接口分

Java實現CORS跨域請求

先來 pty contain type 資源共享服務端 header req options 問題使用前後端分離模式開發項目時，往往會遇到這樣一個問題 -- 無法跨域獲取服務端數據這是由於瀏覽器的同源策略導致的，目的是為了安全。在前後端分離開發模式備受青睞的今天，前

[轉] 利用CORS實現跨域請求

src 流程圖 exp 否則 expose 前端 eof 目前 star [From] http://newhtml.net/using-cors/ 跨域請求一直是網頁編程中的一個難題，在過去，絕大多數人都傾向於使用JSONP來解決這一問題。不過現在，我們可以考慮一下

nginx 實現 ajax 跨域請求

ini syn methods acc -m www eth tran 響應原文：http://www.nginx.cn/4314.html AJAX從一個域請求另一個域會有跨域的問題。那麽如何在nginx上實現ajax跨域請求呢？要在nginx上啟用跨域

WebAPI Ajax 跨域請求解決方法（CORS實現）

custom XML header 就會情況取數 -o cross serve 概述 ASP.NET Web API 的好用使用過的都知道，沒有復雜的配置文件，一個簡單的ApiController加上需要的Action就能工作。但是在使用API的時候總會遇到跨

jsonp _____跨域請求實現

ont pan text company () quest function status cross 請求如下： $.ajax({ type: "GET", async:false, url: "http://127.0.0.1:8080/Cross-sit

JS實現拖拽小案例

res pan urb posit htm eight || move use <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

vue-cli項目本地代理實現跨域請求

con 跨域請求 AR url 本地 dex ams gin 　　使用 Vue-cli 創建的項目，開發地址是 localhost:8080，需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問，需要跨域才能正確請求。跨

八種方式實現跨域請求

防範 erro create ati brush col html5新特性 ole als 瀏覽器的同源策略 ? 提到跨域不能不先說一下”同源策略”。 ? 何為同源？只有當協議、端口、和域名都相同的頁面，則兩個頁面具有相同的源。只要網站的協議名protocol、主

WebAPI實現跨域請求

一、跨域問題的由來目前專案實現前後端分離，所以就會那麼此時前端和後端分別在不同的伺服器上，此時就會涉及到跨域問題。再具體說明一下。 1.前後端未分離：原來我們的積分系統採用MVC框架，整個系統的前端以及後端邏輯都在一個解決方案中，此時我們稱之為前後端沒有分離。

利用原生js實現ajax跨域請求資料

首先，頁面中不需要引入任何的檔案。 1、前臺html頁面 <script> //定義一個ajax var $ = { ajax:function(option){ var url = option.url; var ca

axios實現跨域請求

在使用vue.js進行開發，我們會遇到跨域請求的情況，這裡記錄下自己所遇到的情況。使用的是目前主流的axios進行請求，首先開啟config資料夾下的index檔案，在proxyTable裡面新增程式碼 proxyTable: { '/api': { t

Vue前端服務代理實現跨域請求資料。

開發中請求真實伺服器資料，配置伺服器代理實現跨域。 vue-cli + webpack 構建的專案再 ./config/index.js 檔案中配置 proxyTable: { '/api':{ target: 'http://請求的伺服器地址',

Vue實現跨域請求

實現跨域請求有兩種方式： 1、fetch （1）在App.vue中使用created方法建立fetch，將域名及方法等建立，如下圖（2）在config配置檔案中的index.js中的跨域區域中寫入如下程式碼：（3）完善資訊，將介面相應的需求補充完整

angularjs實現查詢天氣的小案例(跨域請求)

相關推薦