大事件后台数据统计项目bug总结
大事件node => https://github.com/LanHai1/bigEvent-node
大事件后台/前台页面 => https://github.com/LanHai1/bigEvent-pages
1. $.trim(text) || text.trim() 清除文本前后的空格 一般在用户输入框中处理
2. $().empty() 移除元素 并且包括元素内的文本和子元素
3. FormData() 表单数据的键值对的构造方式 注意得设置name值
const formData = new FormData("DOM对象")
FormData返回的数据对象 不能直接查看 需要使用 formData.get(“key”) 查看
删除FormData对象里面删除一个键值对 formData.delete("key")
给 FormData 设置属性值 如果FormData 对应的属性值存在则覆盖原值 否则新增一项属性值 formData.set("key","value")
使用FormData发送数据不需要设置请求头 如果是使用jQuery的ajax来发请求 需要设置{contentType: false,processData: false} 否则会报错
Error: Illegal invocation...
FormData 提交数据 需要配合后端一起处理
jQuery中提供了 $(el).serialize() 方法 也可以获取表单里面提交的数据 并且不需要后端配合使用
- new FormData() 和 $(el).serialize() 区别
new FormData() 获取的是对象形式的数据 |||
$(el).serialize() 获取的是字符串形式的键值对name1=value1&name2=value2
new FormData() 可以传文件 serialize() 不可以传输文件
4. 使用iframe标签(现已用的不多=>vue路由跳转)
a标签的target指向iframe的name属性
iframe 获取父元素 parent 页面的元素或方法 需要用服务器打开 不能直接使用本地路径打开 否则会报错
- jQuery iframe
子页面获取父页面
元素 => parent.$("el")
方法 => parent.method()
父页面获取子页面
元素 => iframe.$("el")
方法 => iframe.method() - JavaScript iframe
子页面获取父页面元素 =>
window.parent.document.getElementById(“id”)
父页面获取子页面元素 =>
window.frames[“iframe_ID”].document.getElementById(“id”)
5. 上传文件按钮美化
一般使用一个图片来替换原始的 input:file 的样子 图片用label标签包起来 for属性指向 input:file 的id 然后再将 input:file 隐藏起来 这样点击这个图片就相当于点击了这个input:file (label for 只能指向 input标签)
6. 获取input file里的图片文件 实现图片预览
👇
https://www.jianshu.com/p/551354f9bae5
7. 隐藏域
数据操作需要当前数据的id 但id不能让用户随意操作 则可以设置隐藏域 input:type=“hidden”
8. 修改or删除数据渲染优化处理
一般如果这个数据没有分页 并且使用ajax修改数据的情况下 修改数据成功后无须重新调用读取数据渲染页面 (重新获取数据会产生耗时) 可以直接在success里面判断对应的code是否成功 可直接通过dom操作去修改or删除对应元素
9. 触发器
$("el").trigger(事件类型)
10. select 选中
可以直接获取select的value 如果设置了value 则获取选中的value值 如果 option没有设置 value 则返回选中的option里面的文字
11. 分页插件
jQuery Pagination 使用方法在大事件 article_list.html 中详细说明 (注意动态分页会死循环)
或在github上直接搜索看文档
12. tinyMCE编辑器
- 获取输入的内容
tinyMCE.activeEditor.getContent()
13. ajax请求阻止默认事件后继续刷新bug
阻止默认事件后 ajax请求还是会刷新 => 如果node里面没做静态资源的处理 就不要把页面代码放在node代码里面 否则node会检测页面的修改会自动刷新
