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. 第一次安装jshint，jshint新手使用记录

    刚刚出来工作的渣渣,第一次进入这样比较正规的公司,各个开发流程都比较严格,代码也是要经过jshint的检测才能上传到svn才能成功打包项目.所以我这种技术都半桶水的职场开发小白,也是第一次用jshin ...

  2. Mysql的排他锁和共享锁

    今天看代码看到有select name from user where id = 1 for update,有点懵逼,完全没有见过,只能说自己见识少了,那就只能学习一下.先做一下基本知识了解(大部分都 ...

  3. OpenJudge_1321:棋盘问题

    题目描述 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆 ...

  4. POJ 3923 Ugly Windows（——考察思维缜密性的模拟题）

    题目链接: http://poj.org/problem?id=3923 题意描述: 输入一个n*m的屏幕 该屏幕内有至少一个对话框(每个对话框都有对应的字母表示) 判断并输出该屏幕内处于最表层的对话 ...

  5. Just Finish it up UVA - 11093

    Just Finish it up Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Sub ...

  6. Reshape the Matrix

    In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...

  7. Python中map()函数浅析

    MapReduce的设计灵感来自于函数式编程,这里不打算提MapReduce,就拿python中的map()函数来学习一下. 文档中的介绍在这里: map(function, iterable, .. ...

  8. 数据库表反向生成(一) MyBatis-generator与IDEA的集成

    在Dao层,通过数据库表反向生成,可以节省我们很多的精力,把更多的精力投入复杂的业务中. 数据库表反向生成,指的是通过数据库如mysql中的库表schema生成dao层读写表的基础代码,包括model ...

  9. 第七章 DAO模式

    第七章 DAO模式 一.JDBC的封装 1.JDBC的封装: DAO位于业务逻辑和持久化数据之间,实现对持久化数据的访问.将数据库都封装起来,对外提供相应的接口 2.DAO模式的作用: 1.隔离业务逻 ...

  10. Python和SQL Server 2017的强大功能

    Python和SQL Server 2017的强大功能 摘要: 源:https://www.red-gate.com/simple-talk/sql/sql-development/power-pyt ...