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. Linux命令详解-type

    type命令用来显示指定命令的类型. 一个命令的类型可以是如下之一     alias     别名     keyword 关键字,Shell保留字     function 函数,Shell函数 ...

  2. 微任务、宏任务与Event-Loop

    首先,JavaScript是一个单线程的脚本语言.所以就是说在一行代码执行的过程中,必然不会存在同时执行的另一行代码,就像使用alert()以后进行疯狂console.log,如果没有关闭弹框,控制台 ...

  3. [转载]CentOS 6.3安装Subversion服务器

    转载自http://www.cnblogs.com/zhoulf/archive/2013/02/02/2889949.html 安装说明 系统环境:CentOS-6.3 安装方式:yum insta ...

  4. winform学习目录

    Winform混合式开发框架的特点总结 伍华聪 2016-02-26 10:47 阅读:1966 评论:2     代码生成工具Database2Sharp中增加视图的代码生成以及主从表界面生成功能  ...

  5. Linux 网络编程->epoll<-LT/ET模式整理(~相逢何必曾相识~)

    今天自己整理一下epoll,网上有很多经典的介绍,看了很多~收藏了很多~还是整理一下做个积累, 自己的东西好找~ 1. epoll 模型简介 epoll 是Linux I/O 多路复用接口 selec ...

  6. MDI窗体及涉及到的相关问题

    MDI窗体是个什么东东尼?多文档窗体唠,相对的还有个SDI,就是单文档窗体.一般情况下我们会将软件的主窗体设置为MDI窗体.那么在主窗体的菜单部分调出来的其他窗体就是主窗体的子窗体了. (1)在主窗体 ...

  7. How to convert a QString to unicode object in python 2?

    How to convert a QString to unicode object in python 2? I had this problem to solve, and I tried to ...

  8. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  9. 《DSP using MATLAB》第2章习题Problem2.1

    1.代码: %% ------------------------------------------------------------------------ %% Output Info abo ...

  10. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...