模块化 JS Ajax 请求
为什么80%的码农都做不了架构师?>>>
现在有一个需求,点击 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;"> </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
转载于:https://my.oschina.net/lvyi/blog/543155
模块化 JS Ajax 请求相关推荐
- [js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ?
[js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ? ajax只支持http/https协议, 可以通过自定义http头来间接支持自定义协议 个人 ...
- js ajax的请求地址不正确,使用香草JS AJAX请求访问本地JSON文件时出现CORS错误?...
我正在尝试使用香草JS AJAX请求从本地存储的JSON文件中拉回JSON字符串(特别是尝试不使用JQuery)-以下代码基于此答案 -但我在Chrome控制台中不断收到错误(见下文).有什么想法我要 ...
- php 禁止ajax 重复请求,js ajax请求防止重复提交
好长时间没写js代码了刚好遇到这样的问题.我们系统多数表单没有做防止重复提交的. 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说 ...
- JS ajax请求参数格式( formData 、serialize)
1 $("#importBtn").click(function(){ 2 if($("#conId").val() == ""){ 3 a ...
- 原生js ajax请求 post,原生js实现ajax 发送post请求
2019独角兽企业重金招聘Python工程师标准>>> var postData = { "name1": "value1", "n ...
- 利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
以下为封装好的工具类代码,使用方法将在后边介绍. /*** Created by xiaoqiang on 2017/11/09.*/ 'use strict'; import $ from 'jqu ...
- Js 拦截全局ajax请求
你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有a ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- [js] 使用ajax请求真的不安全吗?为什么?
[js] 使用ajax请求真的不安全吗?为什么? AJAX是发送HTTP请求的一种方式,只不过浏览器给它加了一个同源策略而已. 所以从这一点可以得出一个结论:AJAX本质上安全性和HTTP请求一样 个 ...
最新文章
- [文档].JLINK挂了怎么办?自己修![转载].JLINK_V8固件烧录和固件升级指导.pdf
- 收藏 | 2021 十大机器学习库
- RISC-V浪潮来袭!115页PPT超详论述,如何与ARM争锋!(一)
- 自定义SOAP消息头
- 去掉ILDasm的SuppressIldasmAttribute限制
- 这么说线程生命周期是不是简单了点?
- Azure底层架构的初步分析
- RxJava+Retrofit+OkHttp深入浅出-终极封装四(多文件下载之断点续传)
- Vue指令之v-for——迭代数组、迭代对象中的属性、迭代数字||v-for循环中key属性的使用
- Android启动initlogo.rle制作
- MDOP套装之app-v安装使用及功能说明
- .NET不死,为什么企业招聘都要java?
- ArcGIS Runtime SDK for Android开发之调用GP服务(异步调用)
- perl 判断不包含某字符串
- Windows Tips
- php解密 hr+c_PHP每15分钟自动更新网站地图(减少服务器消耗)
- mac编译linux开源软件,Mac 端超好用的免费开源软件,我推荐这几款
- 磁珠特性以及选型注意事项
- 微信oauth2.0授权
- QT开发MQTT 之 MQTT 编译