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(centos)环境下Lamp环境搭建,成功版。

    搭建环境必须条件:1.Linux环境,2.Apache,3.mysql ,4.PHP,搭建步骤如下 1.开启Linux,得到root权限:sudo su 接下来输入登录密码,进入root权限,因为安装 ...

  2. mysql用户权限配置

    创建管理员: mysqladmin -u root password 123456 登录 mysql -u root -p 建库及授权 > create database bdp charact ...

  3. TCP/IP(八)之总结ICP/IP四层模型

    前言 在这里有一个问题,有的书上说TCP/IP是四层有的却说是五层.其实这个问题我也上网查了一下资料. tcp/ip是事实标准,分4层.osi模型是国际标准,分7层.讲课的时候,一般把他们综合起来讲, ...

  4. 好用的前端页面性能检测工具—sitespeed.io

    引言 最近在做HTTP2技术相关调研,想确认一下HTTP2在什么情境下性能会比HTTP1.x有显著提升,当我把http2的本地环境(nginx+PHP)部署完成后进行相关测试时,我遇到了以下问题: ( ...

  5. HIT 1917 Peaceful Commission

    这道题题意就是给你n对人,一对中编号为x,x+1,给你m对矛盾,表示这两个人不能同时选. 然后就是Two-Sat的模板题了,就是根据对称性,连边,加缩点,最后拓扑排序,求出一组可行解就可以了. #in ...

  6. The model backing has changed

    其他信息: The model backing the 'WebTopFormContext' context has changed since the database was created. ...

  7. AMD、CMD、CommonJs规范

    AMD.CMD.CommonJs规范 将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS.AMD和CMD.接下来我们看一下这几种规范. 一.模块化规范 C ...

  8. Virgo标签打印

    去年刚换新的公司,熟悉新的业务和代码,在修改公司打印标签的时候,感觉到无比烦躁与头痛.只因为不好维护,所有的标签打印,全部是GDI+绘制,每次修改微调,都只能全部运行才能看到效果.程序过大,编译过慢, ...

  9. iOS 简单socket连接

    - (void)CreateSocket{ NSString *host = [self.realStreamDict objectForKey:@"StreamSeverIP"] ...

  10. 张高兴的 Xamarin.Android 学习笔记:(二)“Hello World”

    完成环境配置后开始第一个简单项目.打开 Visual Studio 新建一个 Xamarin.Android 项目 "HelloAndroid".(GitHub:https://g ...