AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

$http.get('someUrl',config).then(successCallback,errorCallback);
$http.post('someUrl',data,config).then(successCallback,errorCallback);

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

客户端代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li>{{names.name+' '+ names.gender}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', [])
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
// We must whitelist the JSONP endpoint that we are using to show that we trust it
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://localhost:58993/**' //服务器端运行的URL
]);
}]);//很重要,要先设置为信任的url
app.controller('myCtrl', ['$scope', '$http', '$templateCache',
function($scope, $http) {
$http.jsonp('http://localhost:58993/home/TestJSONP?name=2').
then(function(response) {
$scope.names = response.data;
}, function(response) {
alert(response.data)
});
}]);
</script>
</body>
</html>

注意:以上代码的 JSONP 跨域请求。

C#服务端代码

public void TestJSONP()
{
string callback = Request.QueryString["callback"];
var name = Request.QueryString["name"];
var json = "{'name':2,'gender':'男'}";
//JSONP格式:回调函数名(json格式参数)
string result = string.Format("{0}({1})", callback, json);
Response.ContentType = "application/json";
Response.Write(result);
}

AngularJS学习篇(九)的更多相关文章

  1. AngularJS学习篇(十九)

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  2. AngularJS学习篇(二十四)

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  3. AngularJS学习篇(二十三)

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  4. AngularJS学习篇(二十二)

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  5. AngularJS学习篇(二十一)

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  6. AngularJS学习篇(二十)

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  7. AngularJS学习篇(十八)

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  8. AngularJS学习篇(十七)

    AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...

  9. AngularJS学习篇(十六)

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

随机推荐

  1. 在linux上安装rz、sz包

    在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz/sz命令来上传/下载文件. 对于RHEL5, rz/sz默认没有安装所以需要手工安装.sz: 将选定的文件发送(send) ...

  2. Ubuntu16.04 install jdk-8u144-linux-x64.tar.gz

    打开终端: Ctrl+Alt+T 下载jdk: wget http://download.oracle.com/otn-pub/java/jdk/8u144-b01/090f390dda5b47b9b ...

  3. 闲聊DOS命令

    使用DOS命令进入指定文件夹打开文本文件: 回车确定 先进入F盘: 回车后输入:  F: 然后回车就进入了F盘,如下图: 然后比如我们要打开 F:\电脑桌面文件\hosts文件.txt文件,打开步骤如 ...

  4. 使用Entify Framework 6.x的事务操作

    public void TransactionsTest() { using (var context = new testContext()) { //使用EF事务 在vs2013中先升级Entit ...

  5. tcpdump 使用实践

    tcpdump常用配置指导 参考:http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html 1. 指定端口抓包  -i 说明: ...

  6. JavaScript设计模式--门面模式

    外部与一个子系统的通信必须通过一个系统的一个门面对象进行,这就是门面模式. 门面模式具备如下两个角色: 1. 门面角色 客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系 ...

  7. win10 UWP 圆形等待

    看到一个圆形好像微软ProgressRing 我们可以用自定义控件 按ctrl+shift+a 用户控件 我们可以用Rectangle做圆形边 只要Rectangle RadiusX>0圆角 因 ...

  8. win10 uwp 改变鼠标

    经常在应用需要修改光标,显示点击.显示输入,但是有些元素不是系统的,那么如何设置鼠标? 本文主要:UWP 设置光标,UWP 移动鼠标 设置光标 需要写一点代码来让程序比较容易看到,什么光标对于什么. ...

  9. Python正则表达计算器

    Python学习笔记(十二): 计算器 利用Python的正则表达式写的简易计算器 # author : Ryoma # time : 17:39 import re def add(string): ...

  10. UVa1635 - Irrelevant Elements

    通过观察发现其规律符合杨辉三角 需要注意的是最后ai的系数是C(i-1,n-1) 那么,问题就可以变成判断C(0,n-1),C(1,n-1)....C(n-1,n-1)哪些是m的倍数 只需要计算出m的 ...