一、JQuery与AngularJS
首先，先简单的了解一下JQuery与AngularJS。从源头上来说，两者都属于原生JS所封装成的库，两种为平行关系。
二、Ajax请求与数据遍历打印
这里是Ajax和$http请求的JSON文件概览，默认的路径我们就放在与两者同级的文件夹里。
[
{
"name": "一号",
"age": 17,
"hobby": [
"吃",
"喝"
],
"score":{
"math":78,
"chinese":89
}
},
{
"name": "二号",
"age": 17,
"hobby": [
"喝",
"玩"
],
"score":{
"math":78,
"chinese":89
}
},
{
"name": "三号",
"age": 17,
"hobby": [
"玩",
"乐"
],
"score":{
"math":78,
"chinese":89
}
},
{
"name": "四号",
"age": 17,
"hobby": [
"吃",
"喝",
"玩",
"乐"
],
"score":{
"math":78,
"chinese":89
}
}
]
下面是Ajax请求获取JSON文件的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title> <script language="JavaScript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.ajax({
type:"post",
url:"http://localhost:8080/JSON/h51701.json",
dataType:"JSON",
success:function(data){
console.log(data)
}
}); }) </script> </head>
<body> <button>点击请求JSON文件</button> <div></div> </body>
</html>
如果想要直接遍历取出JSON文件中的各种值，则可以通过post和get，一般我们所用的是post，使用时，只需要吧$ajax这一部分换成以下代码。
$.post("http://localhost:8080/JSON/h51701.json",{},function(data){
for(var i = 0 ; i < data.length ; i++){
$("div").append("姓名："+data[i].name+"<br />");
$("div").append("年龄："+data[i].age+"<br />");
$("div").append("数学成绩："+data[i].score.math+"<br />");
$("div").append("语文成绩："+data[i].score.chinese+"<br />");
$("div").append("爱好："+data[i].hobby.toString()+"<br /><br />");
}
},"json")
在这里，我们一般是采用循环遍历的方法一一取出。
三、$http请求与数据的提取
相较而言，$http的方法更简单粗暴，代码如下。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>$http</title>
</head> <body ng-app="app" ng-controller="ctrl"> <pre>{{data}}</pre> <table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>喜好</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>总分</th>
</tr>
</thead>
<tr ng-repeat="item in data | orderBy:'score.chinese'">
<td ng-bind="item.name"></td>
<td ng-bind="item.age"></td>
<td ng-bind="item.hobby"></td>
<td ng-bind="item.score.chinese"></td>
<td ng-bind="item.score.math"></td>
<td ng-bind="item.score.chinese + item.score.math"></td>
</tr>
</table> </body> <script src="libs/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("app", [])
.controller("ctrl", function($scope,$http) {
//方法一
$http({
method: 'POST',
url: 'h51701.json'
}).then(function successCallback(response) {
// 请求成功执行代码
$scope.res = response;
}, function errorCallback(response) {
// 请求失败执行代码
alert("服务请求失败")
});
//方法二
$http.get("h51701.json").then(function successFunction(a){
$scope.res = a;
})
//方法三
$http.post("h51701.json",{/*传递的参数对象*/}).then(function successFunction(a){
$scope.data = a.data;//从返回的信息中取出需要的数据，为JSON对象（数组）
}) }) </script> </html>
在请求方面，三种方法大致与ajax相同，但是在每一数据的提取方面，AngularJS所提供的ng-repeat提供了非常大的便利。
综上，两者相比较，还是AngularJS提取更方便。但是从现如今的更新上讲，JQuery中的ajax更加稳定。
两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http的更多相关文章
-
jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作
前些日子,Insus.NET有实现<ASP.NET MVC使用jQuery实现Autocomplete>http://www.cnblogs.com/insus/p/5638895.htm ...
-
从jquery里的$.ajax()到angularjs的$http
jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节. 在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下 ...
-
一个方法中的ajax在success中renturn一个值，但是方法的返回值是undefind？
https://segmentfault.com/q/1010000003762379 A页面 console.log(handleData("search_list", &quo ...
-
在js中，ajax放在for中，ajax获取得到的变量有误
先看代码 for(var i=0;i<tds.length;i++){ mui.ajax(url+'api/client/gifts/isSigned', {data :{ sqId:" ...
-
使用ionic中的侧边栏以及angularjs中广播的使用
接着之前的ionic的例子 查看例子:我的第一段ionic代码 demo3.html(黄底内容为增加或修改的内容) <!DOCTYPE html> <html ng-app=&quo ...
-
AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
-
django中的ajax组件
目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...
-
Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
-
转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
随机推荐
-
jquery-leonaScroll-1.3-自定义竖向自适应滚动条插件
下载链接地址:https://share.weiyun.com/9ac3ca3fb29648bb1aad1b83a76b123c (密码:4y9t)[含mini版] 欢迎使用leonaScroll-1 ...
-
ATM跨行取款的清算方式
ATM跨行取款和POS机是类似的,因为没有商户参与,所以不需要收单清算,过程更为简单. 回到文章最开头的例子:你拿着一张工行卡去建行的ATM取了100元,这个跨行业务在CNAPS体系中的过程如下: 你 ...
-
泛型数组列表 ArrayList
为什么使用泛型数组列表而不使用普通数组? 1.普通数组经常会发生容量太大以致浪费的情况 2.普通数组无法动态更改数组 基本概念: 1.采用[类型参数]的[类]---->[泛型类] 2.[泛型类型 ...
-
USB数据线上的“疙瘩”：原来有这么大用处！
在不少键盘.鼠标或是游戏外设的数据线末端我们都能见到一小段金属圆环.虽然这算得上是习以为常的一个设计,但如果说到其具体作用的话很多人一下子还真回答不上来.反正笔者在这里先可以告诉大家,这货肯定不是简简 ...
-
python的列表（二）
1.遍历整个列表 #for 循环 # >>> name_list['faker', 'dopa', 'gogoing', 'uzi'] >>> for LOL_ ...
-
React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
-
安卓ADB学习笔记
ADB(Android Debug Bridge)可以远程调试安卓设备,包括模拟器,可以进入终端模式(安卓本身相当于一个linux) 1.配置adb环境变量 以夜神模拟器为例,将模拟器安装路径里的bi ...
-
canvas学习总结四：绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...
-
NSNotificationCenter消息注册与撤销
苹果的消息机制是个非常好用的东西,当需要在类的各个实例之间传递消息或者写一些事件驱动的程序时,绝对是个不错的工具.但是使用时一不小心就会造成引用已经被dealloc的对象的错误,引起程序崩溃.于是,在 ...
-
UE如何去除重复行，删除重复行
1 如图所示,原理一个文本文档有两千多行,但是有大量的重复 2 使用UE的排序功能,有删除重复行的选项. 3 处理之后只剩下不到两百行了.