angular js 模拟获取后台的数据
在这里我们把后台的数据用一个.json文件进行代替。
项目的目录结构如下：
puDongLibraryLearning----ui-router-learning ---- data-------people.json
puDongLibraryLearning-test.html
people.json的代码如下：
[
{
"id": "",
"isActive": false,
"eyeColor": "brown",
"name": "Ingrid Townsend",
"company": "JASPER",
"email": "ingridtownsend@jasper.com",
"address": "690 Charles Place, Santel, Northern Mariana Islands, 3791"
},
{
"id": "",
"isActive": true,
"eyeColor": "blue",
"name": "Estrada Nolan",
"company": "FIBRODYNE",
"email": "estradanolan@fibrodyne.com",
"address": "317 Seeley Street, Cade, Maryland, 3976"
},
{
"id": "",
"isActive": true,
"eyeColor": "brown",
"name": "Laverne Andrews",
"company": "INTRAWEAR",
"email": "laverneandrews@intrawear.com",
"address": "760 Provost Street, Valle, Alaska, 4628"
},
{
"id": "",
"isActive": false,
"eyeColor": "green",
"name": "Hull Woodward",
"company": "SENMAO",
"email": "hullwoodward@senmao.com",
"address": "452 Union Avenue, Hachita, Palau, 9166"
},
{
"id": "",
"isActive": false,
"eyeColor": "green",
"name": "Maria Stanley",
"company": "EYERIS",
"email": "mariastanley@eyeris.com",
"address": "350 Remsen Avenue, Abrams, Ohio, 6355"
}
]
test.html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../materialDesignfile/angular.js"></script>
<script>
angular.module("myApp",[])
.config(['$httpProvider',function ($httpProvider) {
$httpProvider.useApplyAsync(true);
}])
.controller("myCtrl",['$scope','$http',function ($scope,$http) {
$scope.getData=function(){
//刚才在上面写清项目的目录结构就是为了这里的url.
$http.get('ui-router-learning/data/people.json').then(function success(response) {
debugger
console.log(JSON.stringify(response));//运行结果之后会把response 的内容打印出来：
},function error() {
debugger
console.error("request error");
});
}
}]);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="getData()">data</button>
</div>
</body>
</html>
点击data按钮之后，运行结果如下：
{
"data":[
{
"id":"",
"isActive":false,
"eyeColor":"brown",
"name":"Ingrid Townsend",
"company":"JASPER",
"email":"ingridtownsend@jasper.com",
"address":"690 Charles Place, Santel, Northern Mariana Islands, 3791"
},
{
"id":"",
"isActive":true,
"eyeColor":"blue",
"name":"Estrada Nolan",
"company":"FIBRODYNE",
"email":"estradanolan@fibrodyne.com",
"address":"317 Seeley Street, Cade, Maryland, 3976"
},
{
"id":"",
"isActive":true,
"eyeColor":"brown",
"name":"Laverne Andrews",
"company":"INTRAWEAR",
"email":"laverneandrews@intrawear.com",
"address":"760 Provost Street, Valle, Alaska, 4628"
},
{
"id":"",
"isActive":false,
"eyeColor":"green",
"name":"Hull Woodward",
"company":"SENMAO",
"email":"hullwoodward@senmao.com",
"address":"452 Union Avenue, Hachita, Palau, 9166"
},
{
"id":"",
"isActive":false,
"eyeColor":"green",
"name":"Maria Stanley",
"company":"EYERIS",
"email":"mariastanley@eyeris.com",
"address":"350 Remsen Avenue, Abrams, Ohio, 6355"
}
],
"status":,
"config":{
"method":"GET",
"transformRequest":[
null
],
"transformResponse":[
null
],
"jsonpCallbackParam":"callback",
"url":"ui-router-learning/data/people.json",
"headers":{
"Accept":"application/json, text/plain, */*"
}
},
"statusText":"OK",
"xhrStatus":"complete"
angular js 模拟获取后台的数据的更多相关文章
- 原生js怎样获取后台端口数据
全称: XMLHttpReques <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Thymleaf js直接获取后台传过来的对象或者对象的属性以及map
简单说明:第一次接触thymleaf模板,对于thymleaf在js中如何获取后台传递过来的值,真的挺简单的,记住就行了 代码: 后台代码: //传递一个org对象给jspublic String t ...
- jquery 获取后台实时数据
第一步.提醒后台处理数据1.$.ajax({}) 提交数据,2.后台返回状态3.后台开始处理数据,并每秒记录状态到 data.json 文件4.前台每秒请求 data.json 文件,直到处理完成 第 ...
- Vuex 存储||获取后台接口数据
如果你对 Vuex 有一定的了解的话呢,可以继续这一篇的学习了,如果没有的话, 建议先看一看我的上一篇 Vuex基础:地址在下面 Vuex的详解与使用 Vuex刷新数据不丢失 这篇接着上一篇: 这篇将 ...
- Ajax的post方法，模拟 从后台读取数据小demo
$(document).ready(function() { //定义一个函数 function timer() { $.post("1.json", function(data, ...
- 前端 ajax 获取后台json数据 解析
先贴代码 function edit(node) { ).text(); alert(customerid) $.ajax({ type: "post", url: "/ ...
- Angular.js 使用获取验证码按钮实现-倒计时
获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...
- js遍历获取表格内数据方法
1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> & ...
- js 模拟ajax方式提交数据
html页面 <script>function LocaluploadCallback(msg) { document.getElementById("f_localup ...
随机推荐
- 多线程编程以及socket编程_Linux程序设计4chapter15
看了Linux程序设计4中文版,学习了多线程编程和socket编程.本文的程序参考自Linux程序设计4的第15章. 设计了一个客户端程序,一个服务端程序.使用TCP协议进行数据传输. 客户端进程创建 ...
- Jupyter Notebook里面使用Matplotlib画图 图表中文乱码问题
可查看以下链接: https://blog.csdn.net/ccblogger/article/details/79613335
- FPGA算法学习(1) -- Cordic（圆周系统之向量模式）
旋转模式用来解决三角函数,实现极坐标到直角坐标的转换,基础理论请参考Cordic算法--圆周系统之旋转模式.那么,向量模式则用来解决反三角函数的问题,体现的应用主要是直角坐标向极坐标转换,即已知一点的 ...
- 程序员编程利器：20款最好的免费的IDEs和编辑器
程序员编程利器:20款最好的免费的IDEs和编辑器 还没转眼明年可就大年三十了,忙的可真是晕头转了个向,看着亲朋好友们那让人欣羡的小肚腩,不禁感慨,岁月是一把猪饲料,绿了芭蕉,肥了那杨柳小蛮腰,可怜我 ...
- OpenCV入门：（一：安装与配置）
看到的不是自己的,只有写下来的才是自己的,上次接触OpenCV实在三个月前,亢奋的看完了OpenCV自带的入门文档,觉得对图形处理有了一点点了解,现在三个月过去了,由于学习需要,想深入了解OpenCV ...
- Java泛型的基本介绍与使用
为什么要使用泛型? 在Java中增加泛型之前,泛型程序设计是用继承来实现的,例如ArrayList,只维护Object引用的数组: public class ArrayList{ private Ob ...
- 「个人训练」Can you solve this equation?（HDU-2199）
题意与分析 纯粹水题.本来想做下放松心情的,结果还是被坑了qaq 重点就是在浮点误差.比较左右的下次就直接上1e-10,别看着题目说1e-4然后给个-5,结果暴wa.气傻了..... 代码 #incl ...
- Qt 解析网络数据出现ssl错误
最近写了点小东西,哈哈, 网络部分是同学帮我搞的 在编译的时候,出现了一下错误 qt.network.ssl: QSslSocket: cannot call unresolved function ...
- Spring实战第九章学习笔记————保护Web应用
保护Web应用 在这一章我们将使用切面技术来探索保护应用程序的方式.不过我们不必自己开发这些切面----我们将使用Spring Security,一种基于Spring AOP和Servlet规范的Fi ...
- gcc options选项的优化及选择
gcc options选项的优化 -c和-o都是gcc编译器的可选参数[options] -c表示只编译(compile)源文件但不链接,会把.c或.cc的c源程序编译成目标文件,一般是.o文件.[只 ...