提单功能问题笔记

本文聚焦前端开发,涵盖c:if标签赋值、ajax调用后台方法、JS替换字符串等内容。详细阐述了HTML下载按钮、form表单、table样式等方面的问题及解决办法,还针对IE9浏览器中hidden属性、js功能失效等问题给出解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

---- 在c:if标签中,根据不同的返回值赋给表格不同的值

    <td align="center" nowrap>
    	<c:if test="${obj.orderStatus==1}">未结办 </c:if>
    	<c:if test="${obj.orderStatus==2}">未结办转派 </c:if>
    	<c:if test="${obj.orderStatus==3}">退单 </c:if>
    	<c:if test="${obj.orderStatus==4}">已结办 </c:if>
    </td>

如果在test中需要进行逻辑连接

    <td align="center">
    	<c:if test="${obj.orderStatus==1 || obj.orderStatus==2}"><a href="Update.do">处理</a> </c:if>
    	<c:if test="${obj.orderStatus==3 || obj.orderStatus==4}">无</c:if>
    </td>

注意:判断字符串的话,加单引号。

----.通过ajax调用后台方法

//获取当天已提交的工单数量
function countOrder(){
    var count = 0;
    $.ajax({
        type: "POST",
        url:"${ctx}/countOrder.do",
        success: function(data) {
        	count =  data;
        }
   }); 
   return count;
}

执行此方法时,通过前台调试跟踪发现会先执行return count再执行ajax去调用后台方法。

解决办法:在ajax代码中加上“async: false,”就可以了。

jquery的async:false,这个属性默认是true:异步,false:同步。若是异步,则这个AJAX代码运行中的时候其他代码一样可以运行。所以会出现上述情况。

 

---- JS替换字符串

str.replace(/需要替换的字符串/g,"新字符串")
"yyyy-MM-dd-hh-mm-ss".replace(/-/g,"/")

结果如下:
"yyyy/MM/dd/hh/mm/ss"

---- HTML中点击下载按钮遇到的坑

前提:在form表单标签中,有下列两个按钮,且form标签中定义了action属性

<td class="tdl" width="100%">
     <button type="submit" name="btn1" style="width:50px">查询</button>
     <button name="btn2" style="width:50px" onclick="exportIt()">导出</button>
</td>

第一个坑:导出的方法用了ajax

        由于表单的参数较多,所以不想用url?+attrName=attrValue这种方式进行提交,故写了一个ajax方法进行提交。

$.ajax({
        type: "POST",
        url:"${ctx}/exportOrder12580.do",
        cache:false,
        async: false,
        data: {
               "startDate":startDate,
               "endDate":endDate,
               "acceptTelNum":acceptTelNum,
               "commitJobNum":commitJobNum,
               "orderSerialNum":orderSerialNum,
               "orderType":orderType,
               "orderStatus":orderStatus
        },
        success: function(data) {
        	console.log("success!");
        }
}); 

    点击导出后跟踪发现,此方法正常调用了后台action,前台success也打印了,但就是不自动下载文件,调试了很久也纳闷了很久。通过对比其他模块的下载代码,灵光一现想到是不是不应该用ajax方法,百度了一下:

实验:ajax方式下载文件时无法触发浏览器打开保存文件对话框,也就无法将下载的文件保存到硬盘上!
原因:ajax方式请求的数据只能存放在javascipt内存空间,可以通过javascript访问,但是无法保存到硬盘,因为javascript不能直接和硬盘交互,否则将是一个安全问题。

也就是说,依靠单纯的ajax是无法下载文件的(想通过ajax实现下载也是可以的,具体方案可以百度一下)

通常,在web前端需要下载文件,都是通过指定<a>标签的href属性,访问服务器端url即可下载并保存文件到本地。
但是这种方式使用的是HTTP GET方法,参数只能通过URL参数方式传递,无法使用POST方式传递参数。

所以,只能老老实实的用href进行下载。

window.location.href="${ctx}/exportOrder12580.do?startDate="+startDate+"&endDate="+endDate+"&acceptTelNum="+acceptTelNum;

第二个坑:同一个表单里用了俩按钮,其中导出按钮没有定义type属性

就像在前提里贴的代码,导出按钮用的是button标签,但是里面没有定义type属性,所以在点击导出按钮后它会去执行表单的提交动作,也就是跟查询按钮实现同样的功能。同时,它还会走js中定义的exportIt()方法,但是href的值始终是查询也就是form标签中定义的action,并不是在js中重新给它赋的值。

解决办法:添加type属性

<button type="button" name="btn2" style="width:50px" onclick="exportIt()">导出</button>

或者不用button标签,换成input标签

<input type="button" class="btn1" style="width:60px" onclick="exportIt()" value="导出"/>

---- 解决table td里面长串数字或字母不换行的问题

给table添加一个样式:style="word-break:break-all;"    并且td标签里去掉“nowrap”属性

 

---- 问题:html中的form表单用了disabled=“disabled”属性后,在提交时,属性无法提交到后台

解决:form提交时移除disabled:

$("#handleTime").removeAttr("disabled");

---- 问题:IE9中,hidden不管用

通过hidden属性隐藏input输入框后,在Chrome浏览器没问题但在IE9不起作用

原代码

<input type="text" name="id" value='${order.id}' hidden="true">

在Chrome及IE11里均没问题,就是在IE9中隐藏域又会显示出来。

解决办法,更改type属性,删掉hidden属性。如下:

<input type="hidden" name="id" value='${order.id}'>

---- 问题:IE9中,js在打开f12时有效,在不开f12时无效

js中有console.log();语句,ie9在不开开发者工具的状态下,不识别console.log导致js失效。

删除js中所有的console.log即可。

---- 问题:IE9中,js设置的onclick不管用

刚开始是通过attr属性设置的

$("#backfrom").prop("onclick","window.location.href='${ctx}/orderListFront.do?startDate="+'${startDate}'+"&endDate="+'${endDate}'+"'");

此时在Chrome浏览器及IE11中无问题,可正常跳转;但IE9中点击无反应。

目前发现可通过如下三种方式解决

var behindHref = "window.location.href='${ctx}/orderList.do?startDate="+'${startDate}'+"&endDate="+'${endDate}'+"'";
//方法1,通过eval函数
$("#backfrom").click (function(){
    eval(behindHref);
});

//方法2,bind 绑定click事件
$("#backfrom").bind("click",function(){
	window.location.href='${ctx}/orderList.do?startDate='+'${startDate}'+'&endDate='+'${endDate}';
});

//方法3,通过on方法
$("#backfrom").on('click',function(){
	window.location.href='${ctx}/orderListFront.do?startDate='+'${startDate}'+'&endDate='+'${endDate}';
});

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值