一、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. Angularjs 中使用指令绑定点击事件

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

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

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

  9. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

随机推荐

  1. Ice的HelloWorld(Java)

    Ice是一种面向对象的中间间平台,入门ice,简单的HelloWorld是必不可少的. 转载请注明http://www.cnblogs.com/zrtqsk/p/3745286.html,谢谢. 一. ...

  2. winform程序自动升级

    可参考下面这个链接,描述挺详细的,下次用的时候试试,感谢牛逼的作者. http://www.fishlee.net/soft/simple_autoupdater/

  3. 打开Genesis设置单位为mm

    打开Genesis界面: 点击Configuration: 可看到只要设置get_def_units的值即可: 打开C:\genesis\sys\config配置文件,在最后一行加入:get_def_ ...

  4. HTML 编辑基础

    HTML  基础语言 打开DREAMWEAVER,新建HTML.. body的属性: bgcolor                页面背景色 background            背景壁纸.图 ...

  5. IT人才什么最重要

    做人最重要 做人最主要的一条就是尊重别人 不尊重别人,一般都是产生于自己认为自己别别人强,认为别人总是犯一些非常二的错误,于是就不自觉的通过言语.表情.反应等一些细节流露出来 这种人时间长了就会没人愿 ...

  6. 基于MongoDB分布式存储进行MapReduce并行查询

    中介绍了如何基于Mongodb进行关系型数据的分布式存储,有了存储就会牵扯到查询.虽然用普通的方式也可以进行查询,但今天要介绍的是如何使用MONGODB中提供的MapReduce功能进行查询.     ...

  7. Direct3D 2D文本绘制

    现在学习下Direct3D在窗口中绘制一些文本信息,ID3DXFont接口负责创建字体和绘制二维的文本.我们介绍下ID3DXFont的用法. 1.创建LPD3DXFONT接口 LPD3DXFONT g ...

  8. js拾遗:appendChild 添加移动节点

    原文:js拾遗:appendChild 添加移动节点 写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇<浅谈 IE下innerHTML导致的问题>在看了下面的评论,我才 ...

  9. ora2pg数据迁移

    1.安装strawberry-perl-5.242.安装ora2pg-17.4 #perl Makefile.PL #dmake && dmake install3.安装ora2pg相 ...

  10. c#实验一:基于winform的冒泡排序练习

    一.界面设计 在排序前textbox中输入数字,以逗号隔开,通过两个button实现降序排序或升序排序,然后在排序后textbox中显示 三个关键点: 1.监测输入是否合法,最好使用正则表达式 2.拆 ...