文档章节

模块化 JS Ajax 请求

兔之
 兔之
发布于 2015/12/12 15:33
字数 351
阅读 214
收藏 3
点赞 1
评论 0

现在有一个需求,点击 Button需要调用一个函数获取 JSON 数据传给 artTemplate 模板渲染生成页面,所以需要在这个函数中封装原生的 JS Ajax,同时重新渲染页面。

Arttemplate 模板

        <div id="topic_content" class="topic"></div>
        <script id="topic_template" type="text/html">
        {{if isAdmin}}
            <ul>
                {{each list as value}}
                    <li> 
                        <a href= {{value.url}}> {{  value.title }} </a> <span style="font-size:20px;">&nbsp;</span> {{ value.followers }}

                   </li>
                {{/each}}
            </ul>
        {{/if}}
        </script>

封装原生 Ajax

<script>
        function getTopTopicsByDay(day)
        {
            function success(text) {
                var js_obj_of_list_in_json = JSON.parse(text);

                var data = {
                    title: 'topic',
                    isAdmin: true,
                    list: js_obj_of_list_in_json.topics 
                };

                // list 应该是一个数组给 template 渲染,不是一个字符串。

                var html = template('topic_template', data);
                document.getElementById('topic_content').innerHTML = html;
            }

            function fail(code) {
                return;
            }

            var request = new XMLHttpRequest();

            request.onreadystatechange = function () {
            if (request.readyState === 4) { // 成功完成
            // 判断响应结果:
            if (request.status === 200) {
            // 成功,通过responseText拿到响应的文本:
            return success(request.responseText);
            } else {
            // 失败,根据响应码判断失败原因:
            return fail(request.status);
            }
            } else {
            // HTTP请求还在继续...
            }
            }
            // 发送请求:
            request.open('GET', 'http://202.201.13.172:5000/toptopic/api/topics');
            request.send();
        }
		</script>   

返回的 JSON 数据

{
  "topics": [
    {
      "ask_time": "Thu, 10 Dec 2015 07:27:01 GMT", 
      "followers": 1275, 
      "question_id": "38369521", 
      "title": "\u5982\u4f55\u7ed9\u81ea\u5df1\u5404\u79cd\u5e10\u53f7\u7f16\u4e00\u4e2a\u5b89\u5168\u53c8\u4e0d\u4f1a\u5fd8\u8bb0\u7684\u5bc6\u7801\uff1f", 
      "url": "https://www.zhihu.com/question/38369521"
    }, 
    {
      "ask_time": "Wed, 09 Dec 2015 15:23:18 GMT", 
      "followers": 1256, 
      "question_id": "38341320", 
      "title": "\u5728\u77e5\u4e4e\u300c\u6587\u5b66\u300d\u9886\u57df\u6709\u54ea\u4e9b\u503c\u5f97\u5173\u6ce8\u7684\u7528\u6237\uff1f", 
      "url": "https://www.zhihu.com/question/38341320"
    }
]
}

参考

http://www.oschina.net/code/snippet_932545_46223

http://aui.github.io/artTemplate/#%E4%BD%BF%E7%94%A8%E9%A2%84%E7%BC%96%E8%AF%91

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 66
博文 244
码字总数 95573
作品 7
深圳
程序员
JavaScript异步精讲,让你更加明白Js的执行流程!

JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联...

推荐码发放 ⋅ 05/28 ⋅ 0

利用Ajax提升网页渲染速度——以Highcharts为例

先来看看速度优化对比 Django响应请求 在Django的视图模块中, 响应ajax请求, 处理完毕后发送回前端 参考资料 关于HighCharts的Ajax例子可以参考官方文档 点击查看 菜鸟教程 点击查看 还在修改...

謝增光_Feson ⋅ 05/24 ⋅ 0

php中ajax跨域请求---小记

php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({   type:'get',   url:'http://wan.xxx.com/xxx.js',   success:functio...

thinkyoung ⋅ 2015/08/31 ⋅ 0

JavaScript核心概念归纳整理

原文出处: 熊俊漉 JavaScript语言本身是一个庞大而复杂的知识体系,复杂程度不低于任何一门后端语言,本文针对JavaScript语言的核心概念进行简单的梳理,对应的每个知识点仅仅点到为止,不作...

音乐宇Code ⋅ 05/27 ⋅ 0

AJAX基础之JavaScript基础与增强(二)

一,Ajax究竟是个什么东西 用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。 简单一句话 不刷新页面与服务器通讯的技术 在Ajax之前,Web站点强制用户进入提交/等待/重新显示...

architect刘源源 ⋅ 05/08 ⋅ 0

jquery-django项目的csrf保护导致ajax请求返回403

  前言   django项目默认就启动了csrf保护,这样子可以保证网站的安全,但是我们有些页面是需要使用ajax进行请求的,怎么破呢?      jquery.cookie   jquery.cookie是一个简单的、...

linux运维菜 ⋅ 05/22 ⋅ 0

nodejs开发——express框架学习

在我们实际开发项目时,总是会用一些框架,而不是自己从头开始开发。而在nodejs中,express框架就是一个使用频率最高的一个框架。本篇主要来讲解express的使用。 加载express框架 snippetid=...

chenyufeng1991 ⋅ 2017/01/31 ⋅ 0

分布式爬虫框架 - xxl-crawler

分布式爬虫框架XXL-CRAWLER XXL-CRAWLER 是一个分布式爬虫框架。一行代码开发一个分布式爬虫,拥有"多线程、异步、IP动态代理、分布式、JS渲染"等特性; 特性 1、简洁:API直观简洁,可快速上...

许雪里 ⋅ 2017/11/03 ⋅ 6

可扩展的轻量级 web 框架 - openhandx unreal

OpenHandx-Unreal是一个可扩展的轻量级web框架。Unreal以Ajax技术为核心,开创了SS(Script-Service)脚本服务框架开发模式,并完全兼容MVC(Model-View-Controller)框架。SS框架可以轻易完...

辛巴8 ⋅ 04/17 ⋅ 0

我的第二个爬虫——爬取今日头条街拍美女

由于界面上的图片都是通过ajax异步请求的,所以我们还是先了解一下ajax的一些基本原理; ajax:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。其实说白了就是一个...

hello_我的哥 ⋅ 05/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ARMS: 原来实时计算可以这么简单!

摘要: 业务实时监控服务( ARMS)是一款阿里云应用性能管理(APM)类监控产品。借助本产品,您可以基于前端、应用、业务自定义等服务,迅速便捷地为企业构建秒级响应的业务监控能力。 业务实...

阿里云云栖社区 ⋅ 2分钟前 ⋅ 0

Monkey入门_琉璃

先下载android sdk安装配置好路径,然后adb shell 如果给你显示这个,说明目前没有有效的移动设备链接,可以开个安卓模拟器或者使用真机,usb或wifi链接到电脑都可以,打开usb调试模式;然后...

EvanDev ⋅ 3分钟前 ⋅ 0

Idea类注释模板

一、设置类注释模板 1.选择File–>Settings–>Editor–>File and Code Templates–>Includes–>File Header. 2.设置完成后,创建类时自动生成注释,效果如下。...

Clarence_D ⋅ 5分钟前 ⋅ 0

vuejs题

1、active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答:在router目录下的index.j...

自由小鸟 ⋅ 5分钟前 ⋅ 0

2018年社交系统ThinkSNS年中大促

致各大商企事业单位及粉丝用户: 为感谢大家对ThinkSNS品牌的关注与支持,2018年6月18日官方诚推出:年中大促,限时抢购活动! “ThinkSNS 年中大促,¥6.18超值特惠 名额有限,预购从速! ...

ThinkSNS账号 ⋅ 10分钟前 ⋅ 0

MYSQL主从复制搭建及切换操作(GTID与传统)

如下: MYSQL主从复制方式有默认的复制方式异步复制,5.5版本之后半同步复制,5.6版本之后新增GTID复制,包括5.7版本的多源复制。 MYSQL版本:5.7.20 操作系统版本:linux 6.7 64bit 1、异步...

rootliu ⋅ 11分钟前 ⋅ 0

Java强软弱虚引用Reference

Java强软弱虚引用Reference 本文目的:深入理解Reference 本文定位:学习笔记 学习过程记录,加深理解,提升文字组合表达能力。也希望能给学习Reference的同学一些灵感 源码说明 源码基于jdk...

lichuangnk ⋅ 13分钟前 ⋅ 0

plsql 表中字段及注释时为乱码

在windows中创 建一个名为“NLS_LANG”的系统环境变量,设置其值为“SIMPLIFIED CHINESE_CHINA.ZHS16GBK”, 然后重新启动 pl/sql developer,这样检索出来的中文内容就不会是乱码了。如...

江戸川 ⋅ 16分钟前 ⋅ 0

Docker创建JIRA 7.2.7中文破解版

1、介绍 1.1、什么是JIRA?   关于JIRA网上的介绍有很多,以下摘自百度百科:   JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任...

谢思华 ⋅ 20分钟前 ⋅ 0

Java Class 类使用

Java Class 类使用 我们可以通过已知的包名来获取到 Class 对象,从而可以通过反射动态的来操作对象。 获取Class有三种方式 //通过对象.class直接获取Class integerClass = Integer.class;...

gaob2001 ⋅ 25分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部