ajax如何渲染数据
染数据的方法
1)、字符串拼接, 最常用的方法

优点:只进行一次dom回流
缺点:原有dom的事件都会丢失
原因:就在于innerHTML这个属性,这个属性是返回或设置dom中的内容,以字符串形式返回,拼接完之后是string类型,而一些事件属性是dom元素对象身上的,所以这些那些事件属性就会丢失。
2)、dom循环

优点:原有的dom身上的事件不会丢失,不影响其他dom
缺点:dom回流次数过多,严重影响网页性能
3)、模板
模板的本质就是字符串拼接
4)、文档碎片

document.createDocumentFragement
优点:既不影响原有的dom属性,也只回流一次
上面的四种方法对新增的元素都没有之前的事件,如果保证新增的元素也拥有之前的事件,就用事件委托。
ajax如何渲染数据的更多相关文章
- datatables通过ajax调用渲染数据,怎么根据数据给td添加class
html: <table id="table8" cellpadding="0" cellspacing="0" border=&qu ...
- Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上
页面dom结构如下 <ul class="user" id="app"> <li><span>姓名: </span&g ...
- python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...
- Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据
前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...
- Thinkphp3.2.3使用Ajax一定注意 数据返回
Thinkphp3.2.3使用Ajax一定注意 数据返回 $data = 'ok'; $this->ajaxReturn($data); 不能直接 echo $data;
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台
setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...
随机推荐
- 【PHP函数】PHP 去掉字符串中的转义符号
PHP字符串中的转义符号 string stripslashes ( string $str ) //去掉字符串中的反斜线字符.若是连续二个反斜线,则去掉一个,留下一个.若只有一个反斜线,就直接去掉.
- 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示,但是在微信pc端上显示空白
原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...
- C++ 命名管道 与Winform跨进程通信
以下是.NET命名管道解决方案中几个主要的类. NamedPipeNative:这个类和kernal32.dll联系实现命名管道的通信,其中包含一些常用方法和常量. NamedPipeWrapper ...
- javascript高级程序设计第3版——第8章 BOM(浏览器对象模型)
第八章,浏览器对象模型 主要介绍了window的几个对象以及框架,窗口的关系,各个浏览器对象的属性以及方法:
- echarts-五分钟的教程
https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
- jsp页面怎么引入js
人老了,容易忘记事情,再此记录 这里需要注意的是js文件夹要直接放在WebRoot或者WebContent文件夹下面,不要放在WEB-INF下面.因为TomCat对WEB-INF这个文件夹下面的资源是 ...
- minecraft初探
1.在确保客户端和服务器的版本一致的情况下,如果登录出现客户端直接关闭,查看服务器端信息是提示id为空,请注意是否设置了: online-mode=false
- webpack实践笔记
1)cross-env 能跨平台地设置及使用环境变量 大多数情况下,在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡住,windows平台与POSIX在使用命 ...
- java第五次笔记
- VMware虚拟机开机自启动
VMware虚拟机开机自启动 linux 2018年05月09日 08时30分18秒 VMware的命令行语句可以切换到VMware安装目录,使用vmrun.exe --help(windows下)查 ...