AngularJS不仅仅只有双向绑定等等功能，还有发送Ajax请求的Api。

效果图：

请求的文件（data.php）：

<?php

$data = [

    '股市下跌',

    '清明小长假结束',

    '我要接着学习了'

];

echo json_encode($data);

Jqurey方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用jquery加载网络数据</title>

</head>

<script src="http://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>

<body>

<h1>使用jquery加载网络数据</h1>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

<script>

    $.get('data.php',function(rs){

        var i = 0;

        $('li').each(function(){

            this.innerHTML = rs[i++];

        });

    },'json');

</script>

</html>

AngularJS方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用Angular加载网络数据</title>

</head>

<script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

<body>

    <h1>使用Angular加载网络数据</h1>

    <ul ng-app="news" ng-controller="con">

        <li ng-repeat="n in news">{{n}}</li>

    </ul>

</body>

<script>

    var app = angular.module('news',[]);

    app.controller('con',function($scope,$http){

        $http({

            method:'GET',

            url:'data.php',

        }).then(function successCallback (rs){

            $scope.news = rs.data;

        });

    });

</script>

</html>

使用JQuery中的Ajax和使用AngularJS中的Ajax本质上没有区别，只是api的区别，但是获取数据之后，jquery方式必须自己写操作dom元素的代码，但是AngularJS中就不用手动写操作dom元素的代码，而只是用一个ng-repeat标签来操作dom，换句话说，AngularJS操作dom的代码已经被封装起来了，我们不用写，而jquery中必须写。

angularjs之$ajax请求的更多相关文章

  1. angularjs 发送ajax请求的问题

    在angularjs中使用 ajax 如果使用 jquery的 ajax发送请求会遇到结果返回了,但是页面的值却没有改变,如: $scope.queryNameMatch = function() { ...

  2. 关于angularjs中ajax请求php接口参数个是转换的问题

    mainApp.config(function($httpProvider){ $httpProvider.defaults.transformRequest = function(obj){ var ...

  3. angularjs中ajax请求时传递参数的方法

    method1方法使用的是params参数,该用法会把参数直接附加到url中 method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为appli ...

  4. 如何使用angularjs实现ajax异步请求

    Sample.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>fo ...

  5. js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

    今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...

  6. 一步步学习javascript基础篇（9）：ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  7. 配置Chrome支持本地（file协议）的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  8. JQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...

  9. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

随机推荐

  1. 第10章 Pry， 强大的pry-rails和相关的几个好用gem

    https://asciinema.org/a/0KtCL9HB1bP08wNHLfIeOMa8K 本章讲了如何定位❌,和排除bug. Pry  (5000

  2. ZOJ-3962-数位dp

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5594             16进制下的数位dp,由于固定了位数,可以出现前 ...

  3. Linux终端界面屏保

    Linux终端界面屏保   在很多Linux使用者的认知里,都认为终端下的Linux操作界面是没有屏保的,只有像windows那样的图形界面下才有屏保.但是其实Linux下也是有屏保的,只不过是ASC ...

  4. [转载]从B 树、B+ 树、B* 树谈到R 树

    从B 树.B+ 树.B* 树谈到R 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...

  5. 谈一谈手机WebApp的fixed属性（手机上的固定栏）【转】

    1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...

  6. iOS面试准备之思维导图(转)

    以思维导图的方式对iOS常见的面试题知识点进行梳理复习. 目录 1.UI视图相关面试问题 2.Runtime相关面试问题 3.内存管理相关面试问题 4.Block相关面试问题 5.多线程相关面试问题 ...

  7. 在jenkins和sonar中集成jacoco(一)--使用jacoco收集单元测试的覆盖率

    之前系统的持续集成覆盖率工具使用的是cobetura,使用的过程中虽然没什么问题,但感觉配置比较麻烦,现在准备改用jacoco这个覆盖率工具来代替它.接下来我介绍一下jenkins配置jacoco,并 ...

  8. Bootstrap文件上传组件

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  9. Laravel学习之旅（一）

    路由 1.简介:简单的说就是将用户的请求转发给相应的程序进行处理: 2.作用:就是建立url和程序之间的映射. 3.请求类型:get.post.put.patch.delete 相比于thinkphp ...

  10. flask第二十一篇——练习题

    自定义url转化器 实现一个自定义的URL转换器,这个转换器需要满足的是获取从多少到多少的url,例如,你输入的地址是http://127.0.0.1:8000/1-5/,那么页面返回[1,2,3,4 ...