我们见过很多使用jsp ,php,asp的动态网页技术的网站了,我们知道如果一个网站内容更新频率极低,而内容量不是十分庞大时,这样的网站(一次开发完成后不会需要较多的维护成本)的完全可以使用全部使用静态页面来做,此时其实反而可以得到更好的效果(更快的响应时间(省掉了服务器各种拦截器,过滤器,数据库查询..),...)

有一个有趣的情形是,当需求没有那么复杂,你想要的真的非常清晰,非常直观,非常简单时,关于网站,我完全可以非常轻量级的非常惬意的去做这件事情,然后版本迭代,渐进增强,

我尝试着,可以使用json进行通用的数据传递,制定出一套数据的请求接口(ajax的url),这是一个思路再清晰不过的后台了

页面可以彻底使用静态的html,同样可以做到动态的数据,例如一个用户列表页和一个用户详情页,html技术里本身js即可以实现截获相应请求参数,异步请求,页面重定向等

//user_list页内
<a href="user_profile.html/?user_id=5">跳到user_profile页去</a> //user_progile页内
var req=window.location.search; //console.log('query:'+req);
var user_id=req.substr(1).substr(8); var profile="http://xxxxx.com/api/users/"+user_id+"/profile"; $.getJSON(
profile,
function(data){
console.log(data);
$('#nick_name').text(data.data.nickname);
});

当然这样做同样有非常多的不足之处,

但显而易见的一件事情是,少写了非常多的一堆代码,少用了一堆library,仍然快速搭建起了一个具体可用的网站,以一种触手可及信手拈来的方式.

静态页面之间的转发与json与ajax做到动态数据的更多相关文章

  1. JS控制静态页面之间传递参数获取参数并应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a ...

  2. 6 json和ajax传递api数据

    1 2 3 4 https://swapi.co/ <h1>Hello Reqwest!</h1> <script> var a = {} reqwest({ ur ...

  3. 使用Varnish+ESI实现静态页面的局部缓存(思路篇)

    使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...

  4. 学习MVC之租房网站(十二)-缓存和静态页面

    在上一篇<学习MVC之租房网站(十一)-定时任务和云存储>学习了Quartz的使用.发邮件,并将通过UEditor上传的图片保存到云存储.在项目的最后,再学习优化网站性能的一些技术:缓存和 ...

  5. DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  6. 微信小程序(六) 文章详情静态页面detail

    文章详情静态页面detail:

  7. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_09-课程详情页面静态化-静态页面测试

    4 课程详情页面静态化 4.1 静态页面测试 4.1.1 页面内容组成 我们在编写一个页面时需要知道哪些信息是静态信息,哪些信息为动态信息,下图是页面的设计图: 打开静态页面,观察每部分的内容. 红色 ...

  8. 使用 Nginx 部署静态页面

    Nginx 介绍 Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为「engine X」,是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP ...

  9. 浅谈在静态页面上使用动态参数,会造成spider多次和重复抓取的解决方案

    原因: 早期由于搜索引擎蜘蛛的不完善,蜘蛛在爬行动态的url的时候很容易由于网站程序的不合理等原因造成蜘蛛迷路死循环. 所以蜘蛛为了避免之前现象就不读取动态的url,特别是带?的url 解决方案: 1 ...

随机推荐

  1. TA-LIB】之MACD

    移动平滑异同平均线(Moving Average Convergence Divergence,简称MACD指标)策略.MACD是查拉尔·阿佩尔(Geral Appel)于1979年提出的,由一快及一 ...

  2. Python文件IO(普通文件读写)

    ## 打开一个文件 - fileobj = open(filename, mode) 其中: fileobj是open()返回的文件对象 filename是该文件的字符串名 mode是指明文件类型和操 ...

  3. 为什么 redis 单线程却能支撑高并发

    redis 和 memcached 有什么区别?redis 的线程模型是什么?为什么 redis 单线程却能支撑高并发? 这个是问 redis 的时候,最基本的问题吧,redis 最基本的一个内部原理 ...

  4. C语言数组篇(三)字符空间 和 非字符空间

     一维数组和字符串         首先是字符数组(区别字符串) ] = {'a','b','c'}; //这只是单纯的字符数组,不是字符串          字符串最重要的标志就是结尾有一个'\0' ...

  5. Robots Gym - 101915G

    传送门 The Robotics Olympiad teams were competing in a contest. There was a tree drawn on the floor, co ...

  6. 字典--数据结构与算法JavaScript描述(7)

    字典 字典是一种以键-值对形式存储数据的数据结构. Dictionary 类 Dictionary 类的基础是Array 类,而不是Object 类. function Dictionary( ){ ...

  7. [学习笔记]CSS选择器

    CSS语法结构 selector {     property1 : value;     property2 : value; } 如果包含多个属性,那么属性每个属性的结尾需要有一个分号.如果属性的 ...

  8. Python 探测图片文件类型

    Table of Contents 1. 探测图片类型 1.1. python magic 1.2. imghdr 1.3. PIL.Image 探测图片类型 今天遇到一个小问题,如何探测图片的文件类 ...

  9. GPIO基础知识

    STM32 GPIO入门知识 GPIO是什么? 通用输入输出端口,可以做输入,也可以做输出.GPIO端口可通过程序配置成输入或输出. 引脚和GPIO的区别和联系 STM32的引脚中,有部分是做GPIO ...

  10. 分布式缓存技术memcached学习系列(一)——linux环境下编译memcahed

    安装依赖工具 [root@localhost upload]# yum  install gcc  make  cmake  autoconf  libtool 下载并上传文件 memcached 依 ...