首页 > 其他分享> 文章详细

jsp change事件

2021-07-18 15:03:25 阅读：192 来源： 互联网

标签：function endDate beginDate request jsp 事件 download type 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层仅响应数据

　　页面：

$(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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jsp change事件