一、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的更多相关文章

  1. jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作

    前些日子,Insus.NET有实现<ASP.NET MVC使用jQuery实现Autocomplete>http://www.cnblogs.com/insus/p/5638895.htm ...

  2. 从jquery里的$.ajax()到angularjs的$http

    jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节. 在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下 ...

  3. 一个方法中的ajax在success中renturn一个值，但是方法的返回值是undefind？

    https://segmentfault.com/q/1010000003762379 A页面 console.log(handleData("search_list", &quo ...

  4. 在js中，ajax放在for中，ajax获取得到的变量有误

    先看代码 for(var i=0;i<tds.length;i++){ mui.ajax(url+'api/client/gifts/isSigned', {data :{ sqId:" ...

  5. 使用ionic中的侧边栏以及angularjs中广播的使用

    接着之前的ionic的例子 查看例子:我的第一段ionic代码 demo3.html(黄底内容为增加或修改的内容) <!DOCTYPE html> <html ng-app=&quo ...

  6. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  7. django中的ajax组件

    目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...

  8. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  9. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

随机推荐

  1. NPOI操作类

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  2. sql中的for xml path() 实现字符串拼接

       通常我们需要在sql中拼接字符串   ,可以用for xml path() 来进行拼接,如下实例. 同时未去掉最后一个逗号可以用LEFT函数来实现.     ) AS UserName  FRO ...

  3. MySQL最常用日期时间函数

    日期和时间函数 可能的需求: 当前时间是多少.下个月的今天是星期几.统计截止到当前日期前 3 天的收入总和-- 上述需求就需要使用日期和时间函数来实现: MySQL服务器中的三种时区设置: ①系统时区 ...

  4. 浅谈 angular新旧版本问题

    一直在学习angularJs,之前用的版本比较老,前些天更新了一下angularJs的版本,然后发现了一些问题,希望和大家分享一下. 在老的版本里控制器直接用函数定义就可以 比如: 在angularJ ...

  5. MVC框架中，遇到 [程序集清单定义与程序集引用不匹配]怎么办？

    项目里有一个WinForm程序,它需要使用一套第三方控件.而我的机器上存有这套控件的两种版本(一个是源码版,一个是演示版).结果经常出现“程序集清单定义与程序集引用不匹配的问题”的异常.最要命的是有时 ...

  6. JQuery hover鼠标变换

    一般而言,我们为非按钮.链接等元素添加hover事件时,虽然能够处理悬停事件,但是鼠标却并没有变化,会造成悬停事件不明显的结果,为此,我们可以添加CSS样式cursor:pointer,使得该元素的悬 ...

  7. 【Spark2.0源码学习】-5.Worker启动

         Worker作为Endpoint的具体实例,下面我们介绍一下Worker启动以及OnStart指令后的额外工作   一.脚本概览      下面是一个举例: /opt/jdk1..0_79/ ...

  8. 在Android Studio上测试运行，Unity发布成Android包过程中所遇到的问题及解决方案

    问题一:Exception: JNI: Init'd AndroidJavaObject with null ptr 解决方法: 所有关于JNI出现的问题,只有三种错误存在,第一是需要在真机上运行测试 ...

  9. Play再识 - 不放弃的执着

    从写Play初识时,前面各种称赞play如何如何解放java web开发,最后因为网络被墙而无法正常编译,从而想到放弃.从来都有成为web开发高手的想法,今天又再一次进行尝试,惊喜的是有新的进展. 首 ...

  10. WPF学习随笔

    内容控件 Padding内边距,Margin外边距 1.ScrollViewer滚动条控件 <ScrollViewer VerticalScrollBarVisibility="Vis ...