web页面数据展示新想法(json)
在客户端使用js将json的数据绑定到页面元素中,而在服务器端只用根据参数生成不同数据的json字符串,这样不但减少了网络数据流量,而且也分离了显示层和逻辑层。
为了绑定数据,客户端必须要有绑定数据使用的js代码。而数据绑定一般都是一样的,所以可以使用公用的绑定方式,比如span就将数据绑定到html属性中。
优点:
1.数据交换量小,有利于传输。
2.页面和业务层分离
3.数据绑定无刷新
4.服务器端因为要生成的数据量减少了,所以压力会降低
缺点:
1.由于使用js绑定数据,造成客户端压力增大
2.浏览器的不同造成js代码不兼容,可能会出现数据绑定失败问题(严重)(如果加入用户可扩展绑定方式则能弥补此缺陷)
3.网站的表面结构容易暴露在有心人之下(需要做的安全工作可能要增加)
相关推荐
-
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现. 前端html代码: <table class="mlt" style="border:1px solid red;"> <thead> <tr> <if condition="$type eq 'pg'"> <th colspan=
-
JavaScript如何一次性展示几万条数据
有一位同事跟大家说他在网上看到一道面试题:"如果后台传给前端几万条数据,前端怎么渲染到页面上?",如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案. 有的说直接循环遍历生成html插到页面上:有的说应该用分页来处理:还有的说这个面试官是个白痴, 哪有后台传几万条数据给前端这种情况的:我仔细思考了一下,先不论后端到底会不会白痴到传几万条数据给前端,假如真碰到这种情况,那么如果前端获取到数据以后, 直接将数据转换成html字符串,通过DOM操作插入到页面,势必导
-
jQuery调取jSon数据并展示的方法
本文实例讲述了jQuery调取jSon数据并展示的方法.分享给大家供大家参考.具体如下: 以下代码是将页面中的展示部分 复制代码 代码如下: function searchProductlistByfilterCondition(index, type, sort, filterWord) { //cite_html var citem_html = '<div class="citem"><div class="citemtop&quo
-
Vue.js展示AJAX数据简单示例讲解
最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e
-
web页面数据展示新想法(json)
在客户端使用js将json的数据绑定到页面元素中,而在服务器端只用根据参数生成不同数据的json字符串,这样不但减少了网络数据流量,而且也分离了显示层和逻辑层. 为了绑定数据,客户端必须要有绑定数据使用的js代码.而数据绑定一般都是一样的,所以可以使用公用的绑定方式,比如span就将数据绑定到html属性中. 优点: 1.数据交换量小,有利于传输. 2.页面和业务层分离 3.数据绑定无刷新 4.服务器端因为要生成的数据量减少了,所以压力会降低 缺点: 1.由于使用js绑定数据,造成客户端压力增大
-
vue如何实现Json格式数据展示
目录 Json格式数据展示 vue解析json数据 Json格式数据展示 vue的jsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下 JSON.stringify(obj, null, 4) 可以美化json数据的显示 <span class="light">要高亮的内容</span> 在json数据中,如果有需要高亮的内容,用以上标签包起来(这个要处理数据实现了,组件里高亮样式可以根据需要自己修改) <
-
Django实现将views.py中的数据传递到前端html页面,并展示
自学Django已经有一周啦,想把自己自学过程中的每一步都记录下来,给一些零基自学Django的战友们一些参考:本次主要内容为,用一个实例展现views.py中的数据是如何传递到html页面,并在页面中展示. 我的项目已经创建好,我的app为song03apptest.因为我的项目和环境的相关配置已经配置好,如果是第一天开始学习Django的童鞋,请先看我的入门教程,第一个Django实例. 本文重点在于用实例来说明views和html前台页面的传递. 1.打开我的app,song03appte
-
SpringBoot中web模版数据渲染展示的案例详解
在第一节我们演示通过接口返回数据,数据没有渲染展示在页面上 .在这里我们演示一下从后台返回数据渲 染到前端页面的项目案例. 模板引擎 SpringBoot是通过模版引擎进行页面结果渲染的,官方提供预设配置的模版引擎主要有 Thymeleaf FreeMarker Velocity Groovy Mustache 我们在这里演示使用Thymeleaf和FreeMarker模板引擎. Thymeleaf Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎. Thymel
-
asp.net的web页面(aspx)数据量过多时提交失败对策
asp.net的web页面,数据量过多是提交失败,对策: web.config文件中,增加 复制代码 代码如下: <appSettings> ... <add key="aspnet:MaxHttpCollectionKeys" value="5000" /> ... </appSettings>
-
ASP中Web页面间的数据传递方式
摘要:基于web的动态网页设计必会涉及到页面间的数据传递,文章探讨了asp设计中常用的web页面间的数据传递方式,分析各种数据传递方式的使用方法.使用场合及优缺点,其都是设计阶段选择数据传递方式考虑的关键. 关键词 数据传递变量浏览器端网页 往往使用动态网页技术制作asp应用程序时一般至少拥有二个或二个以上的web页面,这时就得考虑在多个web页面间传递数据的处理工作.而asp应用程序的各个页面类似于windows应用程序的form窗体,windows应用程序各form间数据传递可以通过定义全局
-
浅谈Web页面向后台提交数据的方式和选择
1.通过表单提交 这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新. 2.通过网页链接提交 可以在网页的链接附上需要提交的参数,当用户点击链接后,浏览器发起向链接的访问,从而也把链接附带的参数提交到后台,这种方式提交后页面也会刷新. 3.通过ajax提交 Javascript支持ajax方式创建HTTP请求,可以通过在HTML页面元素的事件处理函数中创建ajax请求,在url参数里携带所需提交的
-
Nodejs处理Json文件并将处理后的数据写入新文件中
目录 处理Json文件并将处理后的数据写入新文件 问题描述 实现过程 用Nodejs解析json数据 处理Json文件并将处理后的数据写入新文件 问题描述 事情是这样的,朋友让我处理一个json文件并将处理后的数据写入新文件.这个json文件的结构如下: [ { "head_img": "http://wx.qlogo.cn/mmhead/xxxxxxxxxxx", "nick_name": "x
-
jsp页面 列表 展示 ajax异步实现方法
1. 服务端先返回页面基本结构(如message.jsp), <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ tag
-
使用CamanJS在Web页面上处理图像的技巧
你可能会想问既然CSS已经有现成的功能可以支持基础的图像操作了,为什么我们还会想要为此使用一个像这样的 JavaScript 库呢. 好吧,除了有浏览器的支持,使用 CamanJS 有许多的好处.它为我们操作图像提供了更多的过滤器和选项.你可以在你的图像中创建高级过滤器,进而控制其中的每一个像素.你可以使用其内置的混合模式和图层系统.而它也能让你进行图像的跨域操作,并可以对操作产生的图像进行保存. 现在,就让我们来开始探索 CamanJS 所提供的特性吧! 引入必要的文件 要开始使用 Caman
随机推荐
- DOM基础教程之使用DOM控制表格
- Linux 下VSFTP服务搭建过程
- PHP执行SQL文件并将SQL文件导入到数据库
- php面向对象全攻略 (十五) 多态的应用
- mysql 时间转换函数的使用方法第1/2页
- 快速解决js中window.location.href不工作的问题
- JS实现的表格行上下移动操作示例
- javascript自定义的addClass()方法
- 如何提高Request集合的使用效率?
- PowerShell函数一次返回多个返回值示例
- 文本、Excel、Access数据导入SQL Server2000的方法
- jquery实现两边飘浮可关闭的对联广告
- javascript Array.prototype.slice的使用示例
- 详解Centos7.2安装Nginx实现负载平衡
- C++中运算符 &和&&、|和|| 的详解及区别
- 关于C++一些特性的探究
- Python科学计算包numpy用法实例详解
- Spring Boot中使用RabbitMQ的示例代码
- jQuery使用bind动态绑定事件无效的处理方法
- python启动应用程序和终止应用程序的方法