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. JSON和java对象的互转

    先说下我自己的理解,一般而言,JSON字符串要转为java对象需要自己写一个跟JSON一模一样的实体类bean,然后用bean.class作为参数传给对应的方法,实现转化成功. 上述这种方法太麻烦了. ...

  2. 【JVM命令系列】jstack

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...

  3. mybatis typehandler

    建立TypeHandler 我们知道java有java的数据类型,数据库有数据库的数据类型,那么我们在往数据库中插入数据的时候是如何把java类型当做数据库类型插入数据库,在从数据库读取数据的时候又是 ...

  4. webservice部署到服务器报错

    System.Net.WebException: 基础连接已经关闭: 发送时发生错误. ---> System.IO.IOException: 从传输流收到意外的 EOF 或 0 个字节. 在 ...

  5. Linux用户和文件权限管理

    本文为原创文章,转载请标明出处 目录 用户管理 系统用户文件 添加用户 useradd 设置用户密码 passwd 删除用户 userdel 用户管理 usermod 用户组管理 系统用户组文件 添加 ...

  6. Win CE 6.0 获取手持机GPS定位2----示例代码 （C#）

    一.须知 1.手持机(PDA)必须有GPS模块,才能通过代码使用串口通信获取GPS相关信息 2.要清楚自己手持机(PDA)固定的GPS通信串口号,如我们公司的手持机获取GPS信息的串口为COM4 3. ...

  7. 媲美jQuery的JS框架——AngularJS（一）

    前言 相信原生JS大家都不陌生,至于为什么说原生,是因为在JS的基础上衍生出了很多的框架.有些框架的使用非常广泛,甚至已经达到了媲美原生的地步.在之前的文章中给大家介绍了jQuery这一介绍框架.今天 ...

  8. 微信公众号第三方 推送component_verify_ticket协议

    整了一天,终于弄明白了 component_verify_ticket 怎么获取的了.在此先批一下微信公众号平台,文档又没写清楚,又没有客服,想搞哪样哈! 好,回归正题. 第一,先通过开发者资质认证, ...

  9. sublime addons backup

    1.you can create a file to store you installed addons and use git to store github.com just like that ...

  10. 关于AOP装饰函数中的this

    在学习关于JavaScript的装饰者设计模式的过程中,发现其实现方式的关键在于this的使用. 想象一个匿名函数(其实预定义的有名函数也可以,都存在引用),其中的this: // 我们先定义一个匿名 ...