您的位置：首页 > 理论基础 > 计算机网络

用$http的方法请求json数据（angularjs）附加时间间隔和时间等待

2017-10-13 19:39 417 查看

用$http的方法请求json数据，

下面一共写了俩种方法 其实都一样只是 ， 一个有输入框进行查询如下：

第一个：

首先上图：

没有输入框的

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>用$http的方法请求json数据</title><script src="angular-1.3.0.js"></script><script>var app=angular.module("myApp",[]);//json串连接app.value("url","https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2")app.controller("myCtrl",function ($scope,$http,url) {//$http：服务向服务器发送请求，应用响应服务器传过来的数据。//$http.get(url)适用于读取数据的函数$http.get(url).then(function (response) {//开发者工具，主要是查看哪里报错console.log(response.data);//一层一层的找到需要的数据名称$scope.city=response.data.HeWeather5[0].basic.city;$scope.brf=response.data.HeWeather5[0].suggestion.comf.brf;$scope.txt=response.data.HeWeather5[0].suggestion.air.txt;},function () {//开发者工具，主要是查看哪里报错console.log(response.status)})});</script></head><body><div ng-controller="myCtrl">//在json串中的数据名称<div>城市：{{city}}</div><div>空气质量：{{brf}}</div><div>注意事项：{{txt}}</div></div></body></html>

第二个：

有输入框的：

上代码：

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>用$http的方法请求json数据</title><script src="angular-1.3.0.js"></script><script>var app=angular.module("myApp",[]);app.controller("myCtrl",function ($scope,$http) {//input 页面的框里输入的值传递给下面的json串$scope.cx="";//这里设置一个button按钮进行点击运行$scope.cha=function () {$http({//指定的类型method:"GET",//json串连接                   这里需要在页面传递过来输入的值不断变化所以要写成活的url:"https://free-api.heweather.com/v5/weather?city="+$scope.cx+"&key=545d63e185fc48169a43cbabba6e74d2"}).then(function (dd) {//一层一层的找到需要的数据名称$scope.city=dd.data.HeWeather5[0].basic.city;$scope.brf=dd.data.HeWeather5[0].suggestion.comf.brf;$scope.txt=dd.data.HeWeather5[0].suggestion.air.txt;})}})</script></head><body><div ng-controller="myCtrl"><input type="text" ng-model="cx"> <button ng-click="cha()">查询</button><div>城市：{{city}}</div><div>空气质量：{{brf}}</div><div>注意事项：{{txt}}</div></div></body></html>

请求本地json数据：

上图：

需要注意的是把json串文件放在代码工具的同一文件夹下：

接下来上代码：

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>用$http的方法请求json数据   本地</title><script src="angular-1.3.0.js"></script><script>var app=angular.module("myApp",[]);app.controller("booksa",function ($scope,$http) {$http.get("book.json").then(function (response) {$scope.book=response.data;},function (response) {alert(response.status);})})</script></head><body><div ng-controller="booksa"><ul><li>ID:{{book.id}}</li><li>标题:{{book.title}}</li>4<li>类型:{{book.type}}</li><li>描述:{{book.description}}</li><li>图片:<img src="{{book.picture}}"></li><li>是否推荐:{{book.isRecommend}}</li><li>上架时间:{{book.dtCreated}}</li></ul></div></body></html>

=====================================================================================

最后附加   时间间隔  和时间等待：

上图：

代码如下：

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>显示时间的方法 </title><script type="text/javascript" src="angular-1.3.0.js"></script></head><body><div ng-controller="myCtrl"><div>{{name}}</div><div>等待5秒显示文字:{{namea}}</div></div><script>var aa = function () {//时间    年月日   时分秒return new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();};var app=angular.module("myApp",[]);app.controller("myCtrl",function ($scope,$interval,$timeout) {//时间间隔    一秒执行一次$interval(function () {$scope.name=aa();},1000);//时间等待   等待5秒$timeout(function () {$scope.namea="你好，！"},5000);});</script></body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航