提单功能问题笔记

最新推荐文章于 2024-03-19 17:44:13 发布

★凉白★不开★

最新推荐文章于 2024-03-19 17:44:13 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/coldwhitewater/article/details/89886798

笔记专栏收录该内容

6 篇文章

订阅专栏

本文聚焦前端开发，涵盖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}';
});