静态页面之间的转发与json与ajax做到动态数据

我们见过很多使用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,仍然快速搭建起了一个具体可用的网站,以一种触手可及信手拈来的方式.

时间: 2024-11-06 03:48:17

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

静态页面之间如何传值

一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—> <input type="text" name="username"> <input type="text" name="sex"> <input type="button" value="Post"> &

两个页面之间的通信

今天要给大家说的是两个不同页面之间的通信,通过一个拖拽demo来模拟: 首先,写好基础的拖拽代码: <script> window.onload = function() { var oDiv = document.getElementById('div'); oDiv.onmousedown = function(ev) { var ev = window.event || ev; var disX = ev.clientX - oDiv.offsetLeft; var disY = ev.

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

在上一篇<学习MVC之租房网站(十一)-定时任务和云存储>学习了Quartz的使用.发邮件,并将通过UEditor上传的图片保存到云存储.在项目的最后,再学习优化网站性能的一些技术:缓存和页面静态化. 使用缓存可以降低数据库的压力,而使用页面静态化则可以降低Web服务器的压力. 一 缓存 ASP.NET下可用的缓存为System.Web.Caching.Cache,保存在服务器内存中,不适用于服务器集群,虽然也用没用过集群,但现在的主流都使用NoSQL数据库来做缓存,典型的有Redis和Mem

详谈Apache、Nginx和tomcat的区别以及处理静态页面和动态页面的方式

就目前来说,网站主要分为静态页面和动态页面,纯静态页面的网站已经比较少见了,大型网站一般使用的是静态页面+动态页面的建站技术,还有一部分网站是纯动态页面.负责处理这些页面的软件我们通常称之为web容器,是一种服务程序,负责处理客户端(浏览器)发来的访问请求,如果是静态页面会直接将文件内容呈现给客户端(浏览器),如果是动态页面会将其解析成静态内容之后再呈现给客户端(浏览器). 一.Apache.Nginx和tomcat的区别 ApacheApache HTTP Server(简称Apache)是A

静态页面、动态页面和伪静态页面的区别

1.静态页面 优点:相对于其他两种页面(动态页面和伪静态页面),速度最快,而且不需要从数据库里面提取数据,速度快的同时,也不会对服务器产生压力. 缺点:由于数据都是存储在HTML里面,所以导致文件非常大.并且最严重的问题是,更改源代码必须全部更改,而不能改一个地方,全站静态页面就自动更改了.如果是大型网站有较多的数据,那会占用大量的服务器空间,每次添加内容都会生成新的HTML页面.如果不是专业人士维护比较麻烦. 2.动态页面 优点:空间使用量非常小,一般几万条数据的网站,使用动态页面,可能只有几

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

一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错的地方. 官方网站(中文):http://datatables.club/ 官方网站:https://www.datatables.net/  二.简单的例子 怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table. $(document).ready(function

基础复习(京东静态页面的实现)第一天

一.前言 作为一个技术小白决定记录下自己前端学习过程的点点滴滴,欢迎各为大神轻喷! 二.引入 前端最为基础的就是Html.css.js,为了巩固并且加强自己的基础所以挑选出了京东的静态页面作为这三天的复习内容!在第一天中我首先完成的是页面的快速导航.头部广告.搜索栏三个基础页面! 三.重点内容 ㈠ 开发前的准备工作: 在开始一个完整的项目之前首先要做的并不是着急的去写代码,完成项目前的准备工作.项目的准备工作可以分为以下几个部分 ① 配置开发环境     ② 建立项目文件夹     ③css文件

前端自动化流程工具_gulp_静态页面构建

合并文件.压缩.雪碧图 1.安装gulp环境 2.完整目录结构如下: css:.less/.sass源文件 html:静态页面文件 img:不需要合并的图标 slice:需要生成雪碧图的图标 publish:开发时引用的文件(自动生成) release:发布的文件(自动生成) gulpfile.js/package.json gulp配置文件 3. 目录结构建好之后,调用npm install下载package.json文件中定义好的插件

HTML5+CSS3静态页面项目-BusinessTheme的总结

因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图了,具体的设计文件可以在文末的Github地址中下载.第一次的总结是以我对页面架构的理解,按照代码实现顺序讲解的,那这一次就按照遇到的问题总结性地记录吧.欢迎大家看完我的作品和总结以后,提出宝贵的建议!谢谢大家! 经过上一次的练手,这次的练手就更加从容了,不仅仅是为了查缺补漏,也是为了解决问题的同时