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=
-
jQuery调取jSon数据并展示的方法
本文实例讲述了jQuery调取jSon数据并展示的方法.分享给大家供大家参考.具体如下: 以下代码是将页面中的展示部分 复制代码 代码如下: function searchProductlistByfilterCondition(index, type, sort, filterWord) { //cite_html var citem_html = '<div class="citem"><div class="citemtop&quo
-
JavaScript如何一次性展示几万条数据
有一位同事跟大家说他在网上看到一道面试题:"如果后台传给前端几万条数据,前端怎么渲染到页面上?",如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案. 有的说直接循环遍历生成html插到页面上:有的说应该用分页来处理:还有的说这个面试官是个白痴, 哪有后台传几万条数据给前端这种情况的:我仔细思考了一下,先不论后端到底会不会白痴到传几万条数据给前端,假如真碰到这种情况,那么如果前端获取到数据以后, 直接将数据转换成html字符串,通过DOM操作插入到页面,势必导
-
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
随机推荐
- Ajax跨域代理访问网络资源的实现代码
- 通过mod_python配置运行在Apache上的Django框架
- ASP.NET用户控件技术
- wamp下修改mysql访问密码的解决方法
- php中ftp_chdir与ftp_cdup函数用法
- 快速解决eclipse中注释的代码依然会执行的问题
- Android 手机卫士实现平移动画示例
- 详解Docker目录挂载的方法总结
- js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
- javascript XML数据显示为HTML一例
- 如何实现textarea里的不同文本显示不同颜色
- 十个看完,九个有领悟~!!!
- Bootstrap路径导航与分页学习使用
- PowerShell String对象方法小结
- Ruby中数组的一些相关使用方法
- PowerShell查找分区中最大文件的方法(查找文件并按大小排序)
- sql2000挂起无法安装的问题的解决方法
- Serv-U中禁止某类文件上传的设置方法
- javaweb Servlet开发总结(二)
- C#中哈希表(HashTable)用法实例详解(添加/移除/判断/遍历/排序等)