angularjs之$ajax请求
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请求的更多相关文章
- angularjs 发送ajax请求的问题
在angularjs中使用 ajax 如果使用 jquery的 ajax发送请求会遇到结果返回了,但是页面的值却没有改变,如: $scope.queryNameMatch = function() { ...
- 关于angularjs中ajax请求php接口参数个是转换的问题
mainApp.config(function($httpProvider){ $httpProvider.defaults.transformRequest = function(obj){ var ...
- angularjs中ajax请求时传递参数的方法
method1方法使用的是params参数,该用法会把参数直接附加到url中 method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为appli ...
- 如何使用angularjs实现ajax异步请求
Sample.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>fo ...
- js 中ajax请求时设置 http请求头中的x-requestd-with= ajax
今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...
- 一步步学习javascript基础篇(9):ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 配置Chrome支持本地(file协议)的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- ajax请求成功后打开新开窗口(window.open())被拦截的解决方法
问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...
随机推荐
- python socket 编程(TCP与UDP)
实验环境:python2 一.TCP编程 1.建立TCP服务器 ①创建TCPServer.py文件 ②编写服务器代码 1)创建socket对象,调用socket构造函数 2)绑定ip端口(IP号和端口 ...
- HTTP相关知识点
一.工作原理 HTTP协议工作于客户端-服务器架构上.浏览器作为HTTP客户端通过URL向HTTP服务端(即web服务端)发送所有请求. Web服务器接收到请求后,向客户端发送相应的响应信 ...
- 彻底解决WP的TextBox中文字过长显示不出来的问题
文字如果过长的话在TextBox中会显示不完全,这个大家都知道了,后来有人做了ExTextblock增强控件,大部分文字是可以显示出来了,不过,在某些情况下还是会有显示不全的情况. 这个时候一个解决方 ...
- Missing artifact com.sun:tools:jar:1.7解决方案
在配置Java + Robotframework时遇到的问题“Missing artifact com.sun:tools:jar” 1. 先检查一下eclipse或STS中的JDK路径配置是否正确( ...
- Python基础学习----异常
''' 异常: 程序在运行的时候,Python的解释器遇到一个错误会停止运行. 并且会提供错误的信息,这就是异常 抛出异常: 程序停止执行并且提示错误信息这个动作就是抛出异常(raise Except ...
- centos7上systemd详解
centos7上systemd详解 发表于 2016-06-07 | 分类于 linux CentOS 7继承了RHEL 7的新的特性,例如强大的systemd, 而systemd的使用也使得以往 ...
- C#读写三菱Fx PLC 使用Fx 串口协议 读写Fx3U设备
本文将使用一个Github开源的组件库技术来读写三菱 FX PLC,使用的是基于串口的实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能读写操作 github地 ...
- DFS&&BFS
DFS DFS搜索是按照深度的方向搜索,它类似于树的先根遍历,是树的先根遍历的推广. 1.从图的某个顶点v0出发,首先访问v0, 2.找出刚访问过的顶点的第一个未被访问过的邻接点,然后访问该结点,以该 ...
- PHP 中的文本截取分析之效率
PHP 中的文本截取分析之效率 在使用 ThinkPHP 或 Laravel 时都会有用到文本截取的帮助函数. 分别是 msubstr (ThinkPHP 3,ThinkPHP 5 没找到) mb_s ...
- ASP.NET MVC基础入门.
一:ASP.NET MVC 简介 1:asp.net mvc 是一种构建web应用程序的框架,他将一般的MVC(Model--View--Controller)模式应用于asp.net框架. 2:as ...