ng $http 和远程服务器通信的一个服务。
$http({url:'',method:''}).success().error()
简洁写法:
$http.get()
$http.post()
...
注意事项:
①要求返回的数据格式是json格式
②在发起post请求时,如果需要传参
$http.post('url',data),需要设置请求头:
$http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
全局设置请求头:
app.run(function($http){
$http.defaults.headers.post = {'Content-Type':'application/x- www-form-urlencoded'};})
例子:
点击按钮,发起get请求,服务器接收数据返回给客户端,将返回的结果显示出来
发送:name='zhangsan'
返回:json格式字符串
tip:welcome zhangsan
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="getData()">
get请求
</button>
<ul>
<li ng-repeat="tmp in list">
{{"name is "+tmp.name+" age is "+tmp.age}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl',
function ($scope,$http) {
$scope.list = [];
$scope.getData = function () {
$http
.get('data/test.json')
.success(function (result) {
$scope.list = result;
})
.error(function () {
console.log(arguments);
})
}
})
</script>
</body>
</html>
其中 test.json:
[
{
"name":"Lucy",
"age":20
},
{
"name":"Lily",
"age":21
},
{
"name":"Mary",
"age":23
}
]
2.
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="postData()">
获取信息
</button>
<span>{{msg.tip}}</span>
</div>
<script>
var app = angular.module('myApp', ['ng']); //全局设置 post请求头
//app.config 需要用到provider
//app.run app.run(function ($http) {
$http.defaults.headers.post = {
'Content-Type':
'application/x-www-form-urlencoded'
}}
); app.controller('myCtrl',
function ($scope,$http,$httpParamSerializerJQLike) {
$scope.postData = function () {
var user =
{name:'zhangsan',age:20,score:90};
var result =
$httpParamSerializerJQLike(user);
console.log(result);
$http
.post('data/test.php',result)
.success(function (data) {
console.log(data);
$scope.msg = data;
})
}
})
</script>
</body>
</html>
其中test.php:
<?php
header("Content-Type:application/json");
@$name = $_REQUEST['name'];
$result = [];
$result = [
'tip'=> 'welcome '.$name
];
echo json_encode($result);
?>
ng $http 和远程服务器通信的一个服务。的更多相关文章
- 使用VISIO远程服务器上的ORACLE数据库,反向生成数据库实体关系图
反向即根据已有的数据库,生成ER图,很多工具都可以实现这一过程,如visio,powerdesigner等,下面文章记录一下我使用VISIO生成远程服务器上的一个数据库ER图过程,供以后自己参考. 1 ...
- Maven部署web应用到远程服务器
Maven部署web应用到远程服务器 找到了一个很详细的地址:http://www.mkyong.com/maven/how-to-deploy-maven-based-war-file-to-tom ...
- 关于nagios监控远程服务器对服务器性能影响的测试
1. Nagios监视远程服务器时,是通过在控制端执行以下命令进行数据收集的: /usr/local/nagios/libexec/check_http -I 192.168.16.11 /us ...
- ORA-12538;ORA-12154;使用PL/SQL dve无法连接远程服务器上的oracle数据库,同时本机上也安装了一个oracle数据库
问题描述:本人使用PL/SQL dve连接远程服务器上的oracle数据库,一直是没有问题的.我想提高下自己在数据库方面的能力就在自己的笔记本上安装了一个oracle数据库实例,安装并配置好之后,使用 ...
- git本地创建一个分支并上传到远程服务器上
git branch 查看分支 新建分支:git checkout -b dev 把新建的本地分支push到远程服务器 git push origin 本地名字:外地名字 删除远程分支 git pus ...
- android-数据存储之远程服务器存储
一.如何编码实现客户端与服务器端的交互 <一>JDK内置原生API HttpUrlConnection <二>Android内置的包装API HttpClient浏览器 < ...
- 解放双手:如何在本地调试远程服务器上的Node代码
写在前面 谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍 如何在本地通过nod ...
- Linux 笔记 #03# 在 Debian远程服务器上运行 Java socket程序
我试图做什么:把我的破代码放到服务器上运行,并成功与客户端进行 socket通信. 预备环境:刚安装好 MySQL 和 JVM 的 Linux远程服务器(Debian 8)一台. 主要有如下几个步骤: ...
- AngularJs 与服务器通信 $http, $q, $resource
$http服务是AngularJS系统自带的,可以用来进行网络通信.获取远程服务器的数据.要记住的是,$http是对浏览器XMLHttpRequest的封装,也就是说,它其实是Ajax. $http( ...
随机推荐
- 特别好用的swagger ui 封装
Swagger简单介绍 Swagger是一个Restful风格接口的文档在线自动生成和测试的框架 官网:http://swagger.io 官方描述:The World’s Most Popular ...
- hadoop10---消息队列
java消息队列 BlockingQueue也是java.util.concurrent下的主要用来控制线程同步的工具.锁也是用来控制线程同步的,释放锁的时候谁拿到了锁是没有预测的,所以谁拿到了锁是不 ...
- VSCode代码格式化自动换行问题
打开VS设置,添加如下代码 "vetur.format.defaultFormatter.html": "js-beautify-html", "ve ...
- JS与Jquery 中的extend用法不同
1, Jquery //jQuery 应用扩展 jQuery.extend({ // 定义setApDiv setApDiv:function () { ...
- Silverlight应用小知识点
1 Silverlight目录下创建的类 与 根目录下创建的类: 是不同的: Silverlight 不能调用根目录下的类:
- Resharper 快捷键
编辑 Ctrl + Space 代码完成 Ctrl + Shift + Space代码完成 Ctrl + Alt + Space代码完成 Ctrl + P 显示参数信息 Alt + Insert ...
- zabbix3.0安装(本文引用51cto博主烂泥行天下的文章,我也是参考他写的文章安装的zabbix)
但是由于他文章写的时间有点久了,上面的关于安装zabbix之前需要安装的zabbix3.0yum源的链接失效了,所有我找了2个能用的zabbix 3.0yum源,其他的就不再写了 安装zabbix3. ...
- Qt性能问题
使用Qt库开发通信上位机软件,如串口.CAN总线等,涉及到接收界面高速刷新,会使CPU消耗率过高(20%以上),可能还会卡顿. 具体原因不知道,突然想放弃Qt了 ps: 1.问题出在界面刷新,会占据C ...
- [BZOJ1257]余数之和
Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值 其中k mod i表示k除以i的余数. 例如j(5 ...
- 织梦导航 currentstyle 点击li添加class类 样式
<!--导航开始--> <div class="global_nav_wrap"> <ul class="nav nav-pills&quo ...