文档章节

模块化 JS Ajax 请求

兔之
 兔之
发布于 2015/12/12 15:33
字数 351
阅读 220
收藏 3

现在有一个需求,点击 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

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 67
博文 247
码字总数 95896
作品 7
深圳
程序员
私信 提问
web前端性能评测和常规优化方案

如何评测前端性能和优化? 前端开发页面要遵循的基本标准: 1. 统一使用框架、样式表base 2. html、CSS、JS编码要符合前端基本规范 3. CSS、JS进行压缩,多个CSS、JS时,需要进行CDN合并 4....

psasjs
07/30
0
0
7个常见Javascript框架介绍

设计开发中的“框架”指一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。通俗的讲,框...

Junn
2012/09/16
0
0
用Java(JUnit4)对JavaScript(含Ajax)脚本进行单元测试

一、背景 因为原来采用过Rhino(JS解析引擎,新版JDK中也默认包含另外一个解析引擎)来在Java环境中解析JavaScript并运行其中的方法。最近看到有人在问题里提问,模拟Ajax请求的问题。所以就...

NoahX
2013/04/09
0
3
pageload.js Version 2.0.0

Pageload.js Pageload.js是基于Bootstrap3,核心思路是把页面分成固定部分,对这些部分分别进行加载.降低前段页面负载情况,并对独立编辑页面,提高效率. 优点 1.动态加载页面,降低服务器请求内容...

抢小孩糖吃
2015/11/19
0
0
JavaScript异步精讲,让你更加明白Js的执行流程!

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

推荐码发放
05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里云建站

阿里云自营建站 没想到阿里云已经切入这块市场了。可以用拖动的方式来建站的模式,真的还是6.

miaojiangmin
29分钟前
2
0
linux系统top命令:virt,res,shr详解

VIRT:virtual memory usage 虚拟内存 1、进程“需要的”虚拟内存大小,包括进程使用的库、代码、数据等 2、假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m,而不是实际的使用...

刘祖鹏
35分钟前
2
0
day154-2018-11-21-英语流利阅读-待学习

快手网红发明家:百万粉丝 vs 零销量 雪梨 2018-11-21 1.今日导读 “我做了一个‘雷神锤’的斜挎包,你看这里可以打开,里面可以装手机、卫生纸、钱包,觉得轻的话可以放一些砖头。咱们把它背...

飞鱼说编程
42分钟前
10
0
图灵奖得主华人高徒发布AI芯片!64位RISC-V、高度可编程,低功耗

作为RISC-V架构下的旗手玩家,睿思芯科自然希望通过产品展现出RISC-V可编程架构的巨大潜力。 https://mbd.baidu.com/newspage/data/landingshare?context=%7B%22nid%22:%22news_917924603675...

whoisliang
42分钟前
5
0
xcode 10 缺少 libstdc++6.0.9 解决方案

image.png 本方案基于xcode10正式版操作,其它版本请自行验证! 苹果在XCode10中移除了libstdc++(libstdc++.6、libstdc++6.0.9)库。 项目解决方法:删除libstdc++(libstdc++.6、libstdc++6....

壹峰
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部