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

标签：function,endDate,beginDate,request,jsp,事件,download,type,change
来源： https://www.cnblogs.com/ganguixu/p/15026556.html