目录
目录
4.1 iframe 导致请求两次,一次status取消一次成功的问题:
8.1 界面点击按钮不生效,往往是js文件加载错,文件名写错导致的
11、界面输入框回显出现逗号 ,, 关键字(回显,逗号,input)
15、想在点击某个按钮时校验某些条件,且又无法改动当前按钮的触发代码。
前言:有很多是新手烦的错误,甚至是自己挖坑坑自己。但致力于本页面能够解决 大部分的“疑难杂症”,大佬请绕行。
1、防止重复提交表单
场景:点击某个按钮后,后台可能要反应一会,此刻,用户误以为没有点击,可能又点击了一次。导致操作执行两次。涉及到数据操作的就会重复插入。
解决方案:点击按钮后,弹出“遮罩层”,后台处理成功后,移除“遮罩层”。或js使按钮禁用。
//遮罩层
var comonIndex =null;
function showLoadMask(){
commonIndex = layer.msg("请稍等。。。",{icon:16,shade:[0.6,"#f5f5f5"],scrollbar:false,time:0});
}
function hideLoadMask(){
layer.close(commonIndex)
}
2、原生sql能查出,代码查不出。
1、检查链接的数据库地址、数据库名是否是同一个。确保查的是同一个库!。
2、连接大数据hive查询时 遇到过 多加条件查询不到情况,后来说原因是 大数据有bug。。原因未知
3、页面弹出窗,镶嵌其他页面(包括vm、ftl页面)
像普通弹出窗一样,使用layer.open()函数,并且其中content属性,和普通的用法一样,但是需要给ifrme用js设置一下其 src属性
解决方法:使用ifrme标签。
//此代码 写在 主页面,(理解为:只是某个页面的一个隐藏div,只不过这个div用来镶嵌其他页面)
<div id = template_view" style="display:none">
<iframe id='myIframe' src="" frameborder=0 margineight=0 marginwidth=0 scrolling=no allowtransparency="true"></iframe>
</div>
点击某个按钮触发展示嵌入框:
<button type='button' onclick='detailPage(event)'>
对应的js逻辑:
function detailPage(event){
//event 这里没用到 如果用的话 一般是 tr 某行后对应的操作:如 var myvar=$(event.target).parents('tr').chilerem(1)[].innerHTML
var url ="www.baidu.com";
$('#iframe').attr('src',url);
layer.open({
type:1,
title:'详情',
area:['900px','650px'],
scroller:fales;
content:$('#template_view'),
btn:[关闭],
yes:function(index){
layer.close(index);
//避免iframe隐藏的加载请求
$('#iframe_id').attr("src","")
}
})
}
4、iframe自适应子页面高度
//注意:下面的代码是放在和iframe同一个页面中调用
$("#iframe_Id").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight);
});
4.1 iframe 导致请求两次,一次status取消一次成功的问题:
前端开发时使用iframe标签的时候发生两次请求问题的解决方法_陈先生的博客-CSDN博客_iframe请求了两次
我的解决方法:
$('#iframe').attr("src","") //采取了上述链接的 第二种方法,直接将iframe的的src置空 让他请求不了
//什么时候让他请求,再给他设置src的值
5、页面下拉框重置查询条件再查询。
关键字:input 清空下拉框 重置页面输入框为空白
1、传统方法,js控制清空每一个条件输入框。
2、新思路:对 重置 按钮 设置其src为跳转到此页面的url即可了。
例如:
<input type="reset" valye ="重置" onlick ="javascript:location.href='$!{rc.contextPath}/myController/list">
6、页面刷新。
可以模拟人再次点击 ”查询按钮“。写的js函数触发后调用,下面代码即可
$(查询按钮).click()
7、获取整个表单数据
开发中,提交表单数据,一般点击“查询按钮”触发向后台查询的请求,form表单的数据会自动随之传到后台。但某些场景(如条件查询后更新数据,要更新之前填写过条件查询的结果),需要js单独获取form表单的数据。可以使用:
$(“#form表单的id”).serialize() //输出 age=19&&name=qq
或者:
$(“#form表单的id”).serializeArray () //输出json数组
注:在前端浏览器的控制台里 使用该函数,不知道是否浏览器的问题,有可能输不出来结果,也有可能输出结果,但是项目运行还是能够正常使用 serialize()的。
8、当使用js控制某个html标签,拼接没效果,结果不显示
场景:
开发中,遇到 使用js动态追加select的选项,或者使用js追加table的行进行填充数据时。如:$("#id").append("字符串");界面上不生效,但浏览器的控制台,使用 $("#id").html() 是有值的,
解决方法:
就很郁闷,最终 输出 $("#id") ,查看这个html对象时,发现和页面的html的样式不一样,才发现 卧槽,当前页面有两个叫 id=“id”的标签,所以 其实是追加生效了,但追加到其他标签上去了
8.1 界面点击按钮不生效,往往是js文件加载错,文件名写错导致的
虽然这个问题很low 但是使用idea,有时候使用Refaotr导致改文件名会不小心改动了其他的地方。
浏览器控制台:Failed to load resouce:the XXX.js server responesd with a status of 404 即战斗资源。
9、禁用页面引入的第三方部分js或css样式
场景:比如引入其他js模块里的分页,但又不想显示或者禁用部分按钮的功能
(经验:获取标签的引用(第三方库往往使用的是class进行js或者样式的控制,而我们又无法为其标签设置唯一标识的id),可以通过浏览器的,如下图查看进行 层级获取。)
不想显示的js控制:
$(window).bind("load",function(){
//当前页面下 a标签下的 使laypage_last 不显示
$("a.laypage_last").attr("style","display:none;")
})
禁用部分功能:
$(window).bind("load",function(){
//会使 span标签小的class=laypage_total 的标签事件失效,触发没反应
$("span.laypage_total").attr("style","pointer-events:none")
})
10、js获取长度 含 中文英文
场景:数据库某表A字段varchar(100),前端界面输入框 用户可以输入 中文英文,应该使用输入字符串的字节不成功100进行校验。
解决:
function isChechede(str){
var len= new Blob([text]).size;
if(len>100){
$("#myInput").val(""); //清空输入内容,再提示
layer.alert(""输入过长,重新输入);
}
}
11、界面输入框回显出现逗号 ,, 关键字(回显,逗号,input)
场景:开发时复制了其他页面到当前页面,当前页面有很多输入框,就一股脑的先复制够输入框的数量,然后调试时发现,有部分输入框回显查询条件时,里面居然有“,”字符串。
原因:前端传后端数据时,如果前端的input里 name=“XX” 即:相同的名称的 input框,底层传输数据的时候,会用 逗号分割。所以导致 即使什么不输入 测试回显界面效果就会回显出 逗号
解决: input的 name 改成唯一的命名
12、<input type=date > 日期组件,获取不到值
html自带的 日期组件,
<input type="date" value="" id="mydate">
....
var temp= $("mydate").val();
temp有时候取不到值的问题:当用户选取了 不符合日期格式的就会在html页面上显示设置的日期,但是 获取不到该日期,如用户选:2021-02-31 这是调用 .val()方法就获取到的是空值
13、获取界面表格的某一行数据。
html页面如下:
##方法一:在tr的 data-id 直接把值隐藏到这里,一会js获取,后台用 sqlt(",")来取值即可
<tr data-id="张三,26"><td>张三</td><td>26</td><td><a href=""#>class="dataDetail"></td><tr>
<tr data-id="李四,28"><td>李四</td><td>28</td><td><a href=""#>class="dataDetail"></td><tr>
对应的js:
$(".dataDetail").on('Click',function(e){
//获取data-id预先存好的数据
var parms=$(e.target).parents("tr").data("id");
})
##方法二:适用于取当前行的个别字段
<tr data-id="张三,26"><td>张三</td><td>26</td><td><a href=""#>class="dataDetail"></td> <tr>
<tr data-id="李四,28"><td>李四</td><td>28</td><td><a href=""#>class="dataDetail"></td> <tr>
//对应的js
$(".dataDetail").on('Click',function(e){
var name= var parms=$(e.target).parents("tr").find("td").eq(1).html();//获取该行的第一个td元素内容
})
14、覆盖第三方包的js函数 (关键词 引入包 重写 )
场景:公司使用了第三方包,包含了分页的展示效果,但业务提的奇葩问题 分页可以选 100条 :
如图:,于是得修改第三方包源码? 我不能动jar包,所以考虑能不能“重写”。
解决方法:根据 “下一页” 搜索找到到jar包中的这个js文件,把 它拷贝到自己的js文件夹下,对其进行修改后,在html页面的最下方引入该js文件,就起到了覆盖jar包的js的作用。
15、想在点击某个按钮时校验某些条件,且又无法改动当前按钮的触发代码。
场景:公司的页面点击某按钮时,自动触发提交表单的操作(自动触发的代码是jar包或者不能修改的代码),而我现在需要 在点击这个按钮后,判断某个条件是否输入,如果输入则提交表单,否则提示"请输入**条件"。如下:在页面上点击"查询"按钮,会自动提交表单。
<button id="id-query" class="btn btn-sm btn-submit" type="submit">查询</button>
解决方法:使用代理思想。找个"代理"按钮:在界面上隐藏真正的"查询",但展示 "代理"按钮,如果条件符合,再去真正,模拟点击真正的按钮。解决代码如下:
<button id="my-id-query" class="btn btn-sm btn-submit" type="button">查询</button>
<button id="id-query" style="dispaly:none" class="btn btn-sm btn-submit" type="submit">查询</button>
注:按钮的type属性必须指定,否则默认默认刷新当前页面(可能是我们公司的的默认,以防万一 记得指定)
js逻辑:
function myVerify(){
var value = $("#name").value;//获取input框的值
if(value==""){
alert("请输入姓名:");
}else{
//调用真实的按钮触发
$("#id-query").click();
}
}
心得体会:当你无法去完全控制某个东西时,考虑 使用 代理的模式,适用很多场景!
16、JS判断是否输入的是数字
(关键字: js判断数字)
场景:用户输入某个input时,需要只能输入数字
解决方法:调用自带的函数 isNaN(str)即可:
//检查是否是数字
function isNumber(value){
return isNaN(value); //点击函数可跳转,该函数似乎是idea插件自带的
}
17、下载功能、下载进度条
关键字:导出数据、下载文件
方法:用<a>标签,点击a标签后,请求后台,后台处理后,输出:
OutputStream out =response.getOutputStream();
XXX.write(out); //XXX一般为某个文件对象,如XXX为(excel对象 )XSSFWorkbook的实例对象
out.close();
前端js:
$("#myButton").click(function(){
//防止重复点击下载按钮
layer.msg("请稍等。。。正在导出",{icon:16,shade;[0.6,"#f5f5f5"],3000})
$('#urlId').attr('href',url); // 设置href属性 可以使用get请求的url 即拼接参数的
$('#urlId')[0].click(); //默认人手去点击 坑: 没带[0] 结果点击无反应
$('#urlId').attr('href',''); //重置
})
如何判断文件是否下载完成呢?
发送两个请求:一个是下载文件的请求,一个是for循环问后台是否下载完成的请求。 后台两个对应的函数 共用一个count变量,下载文件的会随着填充文件的内容而增加这个count,而count会一直返回给前台,以此在前台进行展示进度条。 该进度条只是展示了文件填充完毕,不代表文件下载成功啊。小文件的下载会很快,但大文件怎么判断呢? 直接在try{}catch{}finally{} 的finally 关闭流后 表示下载完成。