jsp change事件

业务场景:

jsp  change事件

导出按钮是否显示的条件如下:

1、必须选择开始时间和结束时间

2、根据筛选条件查询必须存在数据

3、当点击提交后并且满足如上两个条件,导出按钮变为可选后,如果用户修改了筛选条件则必须把 导出 按钮设为不可选

 

实现的方式有两种:

1、form表单提交  controller层响应一个页面

  页面:

<script>
$(function () {
    <%-- DOM加载完成后 获取download隐含域中的值 如果是1则显示导出按钮 1 是controller层通过逻辑判断后返回的 --%>
    const value = $('#download').val();
    if(value != "" && value == 1) {
      $('#downloadBtn').attr('disabled',false);
    }
  });
  <%-- 监听input标签中的change事件 当值发生改变时则把 导出 按钮设为不可选择 --%>
function changeVal() {
$('#downloadBtn').attr('disabled',true);
}
</script>
  <%-- 这里设置隐含域 存放controller层存到request请求域中的值 --%>
    <div>
<input type="hidden" name="type" value="${type}" />
<input type="hidden" name="beginDate" value="${beginDate}" />
<input type="hidden" name="endDate" value="${endDate}" />
<input id="download" onchange="showBtn()" type="hidden" name="download" value="${download}"/>
</div>
<%-- 这里有一个form为了发送请求 --%>
<form action="/findUserAll2" method="post">
<label>
用户类型:
<select id="type" onchange="changeVal()" name="type">
<option value="0">请选择</option>
<option value="1">普通用户</option>
<option value="2">尊享用户</option>
<option value="3">VIP</option>
<option value="4">VVIP</option>
</select>
</label>

<label>
<p>开始时间:<input onchange="changeVal()" type="text" id="beginDate" name="beginDate" /></p>
</label>
<label>
<p>
结束时间:<input onchange="changeVal()" type="text" id="endDate" name="endDate" />
<button id="downloadBtn" disabled="disabled">导出</button>
</p>
</label>
<button>提交</button>
</form>

controller层:
    @RequestMapping("findUserAll2")
public String findUserAll2(HttpServletRequest request,@Param("type") String type,@Param("beginDate") String beginDate,@Param("endDate") String endDate){
log.info("type:"+type+";beginDate:"+beginDate+";endDate:"+endDate);
List<User> userAll = userService.findUserAll(type, beginDate, endDate);
     //当开始时间和结束时间不为空且 根据查询条件获取的数据size大于0 时 把页面的download属性的值设为1 存入request作用域中
if (beginDate != null && beginDate.trim().length()>0 && endDate != null && endDate.trim().length()>0 && userAll.size()>0) {
request.setAttribute("download","1");
}
request.setAttribute("type",type);
request.setAttribute("beginDate",beginDate);
request.setAttribute("endDate",endDate);
request.setAttribute("userAll",userAll);
return "twoPage";
}

2、ajax请求 controller层仅响应数据

  页面:

<script>

$(function () {
   //当点击提交按钮时获取筛选条件中的值 并发送ajax请求
$('#submitBut').click(function () {
const type = $('#type').val();
const beginDate = $('#beginDate').val();
const endDate = $('#endDate').val();

$.ajax({
url:'findUserAll',
type:'post',
dateType:'json',
data:{
type:type,
beginDate:beginDate,
endDate:endDate
},
success: function (result) {
alert(result.length);
if(result.length>0 && endDate != "" && beginDate != ""){
// 当从后台获取的数据length大于0 并且 本次请求的开始时间和结束时间 不为空时 把隐含域中 download的值 设为1 并手动调用一下onChange事件(必须这么操作)
$('#download').val("1").change();
}else {
$('#download').val("0").change();
}

},
error: function (e) {
alert(e);
}
})
});
});

//调用的onchange事件 获取隐含域中的值  把导出 按钮 设为 可选或者不可选
function showBtn() {
const value = $('#download').val();
console.log(value);
if(value == 1){
     //可选
$('#downloadBtn').attr('disabled',false);
}else {
$('#downloadBtn').attr('disabled',true);
}
}

//监听 input 筛选条件中 onchange事件 当值发生改变时 则把 导出 按钮设为不可选
function changeVal() {
$('#downloadBtn').attr('disabled',true);
}

</script>
<%-- 设置隐含域 --%>
<div>
  //因为ajax请求后 设置了新值 并且调用了onchange事件 所以必须在隐含域中设置onchange属性滴调用自定义函数 showBtn()
<input id="download" onchange="showBtn()" type="hidden" name="download" value="0"/>
</div>
<%-- 筛选条件 --%>
<label>
用户类型:
<select id="type" onchange="changeVal()" name="type">
<option value="0">请选择</option>
<option value="1">普通用户</option>
<option value="2">尊享用户</option>
<option value="3">VIP</option>
<option value="4">VVIP</option>
</select>
</label>

<label>
<p>开始时间:<input onchange="changeVal()" type="text" id="beginDate"></p>
</label>
<label>
<p>
结束时间:<input onchange="changeVal()" type="text" id="endDate">
<button id="downloadBtn" disabled="disabled">导出</button>
</p>
</label>
<button id="submitBut">提交</button>

controller层:
@RequestMapping("findUserAll")
@ResponseBody
public List<User> findUserAll(HttpServletRequest request,@Param("type") String type,@Param("beginDate") String beginDate,@Param("endDate") String endDate){
log.info("type:"+type+";beginDate:"+beginDate+";endDate:"+endDate);
List<User> userAll = userService.findUserAll(type, beginDate, endDate);
return userAll;
}


如果这个两个方式 均实测正常
代码已上传到git 地址:https://github.com/ganguixu/springboot_jsp.git
上一篇:计算两个日期的月份


下一篇:Linux环境下搭建FTP服务器,建立虚拟用户