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页面的定时器的那个请求仍然在执行为什么 ...
随机推荐
- Activity与Fragment数据传递之Fragment从Activity获取数据
整理Fragment与Activity之间的数据交换,大体上包括三种: 1.Fragment从Activity获取数据 2.Activity从Fragment获取数据 3.Fragment之间获取数据 ...
- python3.7导入gevent模块报错的解决方案
最近更新了python解释器3.7 结果安装gevent,在导入gevent之后就报错了,错误信息如下 RuntimeWarning: greenlet.greenlet size changed, ...
- python 近义词库包 synonyms 的使用
最近接触到nlp的一些东西,需要找出中文词语的近义词,也接触到了一个synonyms 的库, 分词,去停用词,word2vector 等 一些列nlp 的操作,还可以输出中文词语的近义词 https ...
- 983. Minimum Cost For Tickets
网址:https://leetcode.com/problems/minimum-cost-for-tickets/ 参考:https://leetcode.com/problems/minimum- ...
- JAVA写接口傻瓜(#)教程(四)
接上篇 7.sevlert 啊啊啊终于写到最重要的实现部分了.Servlet = Service + Applet,表示小服务程序.Servlet 是在服务器上运行的小程序.这个词是在 Java ap ...
- ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别
最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...
- 跟随我在oracle学习php(11)
数组专题 数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ consol ...
- 为虚机Linux系统设置静态IP,ping通外网并解决相关问题
在虚机中安装完Linux系统后,虚机是ping不通外网的,而默认的动态IP会为之后的Hadoop应用造成不少麻烦,为了减少这些不必要的麻烦,我们把系统的IP设置为静态. 步骤: 修改系统配置文件 命令 ...
- day43-python消息队列二-queue模块
Python提供了Queue模块来专门实现消息队列Queue对象 Queue对象实现一个fifo队列(其他的还有lifo.priority队列,这里不再介绍).queue只有maxsize一个构造参数 ...
- MySQL · 性能优化· 5.7.6 InnoDB page flush 优化
在这篇文中,我们已经详细介绍了Oracle MySQL以及社区分支最新的对InnoDB page flush的优化.在最近release的5.7.6版本中又有了进一步的改进.主要包括以下几点修改 修改 ...