checkbox给后台传值以及后台处理值

本文介绍了一个使用HTML复选框收集用户选择的水果类型,并通过JavaScript的AJAX调用将这些数据发送到后端进行处理的例子。后端接收前端发送的数据,将其解析并用于SQL查询条件的构建,实现动态数据筛选。

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

1,前端界面

               <li>
                    <label class="control-label">水果分类</label>
                </li>
                <li class="checkbox" style="border-right: 1px solid #ededed;">
                    <label><input type="checkbox" name="fruit" value="1" />苹果</label>
                    <label><input type="checkbox" name="fruit" value="2" />香蕉</label>
                    <label><input type="checkbox" name="fruit" value="4" />葡萄</label>
                    <label><input type="checkbox" name="fruit" value="3" />榴莲</label><br/>
                    <label><input type="checkbox" name="fruit" value="9" />其他</label>
                </li>

2,前端js发送ajax

<script language="JavaScript">

function  search(){

       var fruit= '';
        var dd = '';
        var radio = document.getElementsByName("fruit");
        for(var i = 0;i<radio.length;i++)
        {
            if(radio[i].checked==true)
            {dd = radio[i].value;
             fruit= fruit+","+dd;
            }
        } 

$.ajax({ 
              type:"POST", 
              url:"${rc.getContextPath()}/realtime/tuberRegistTreat/data.do", 
              dataType:"json", 
              data:{"fruit":fruit}, 
              success:function(data){ 
                  debugger;
                  var dataList = "";
                data.forEach(function (t) {
                    dataList += "<tr><td class='same'>"+t[0]['AREA']+"</td>"
                    +"<td class='same'>"+t[1]['sum']+"</td>"
                    </tr>";
                });
                $('tbody').html(dataList);
              }, 
              error:function(){ 
                console.log("error") 
              } 
            })  

}

</script>

3,后端处理

// 数据处理
    @RequestMapping(value = "data", method = RequestMethod.POST)
    @ResponseBody
    public List<Object> data(ModelMap modelMap, HttpServletRequest req, String fruit){

if (StringUtils.isNotBlank(fruit)) {
            String[] reStrings = fruit.split(",");
            sb += " and (";
            for (int i = 0; i < reStrings.length; i++) {
                if(reStrings[i]!=""){
                    if(i==1){
                        sb += "A.REGISTERTYPE = '" + reStrings[1] + "'"; 
                    }
                    if(i>1){
                        sb += " or A.REGISTERTYPE = '" + reStrings[i] + "'";
                    }
                }
            }
            sb += ")";
        }
        return sb;
    }

}

结束:这样前端复选框传过来的值就能被分别拼入sql语句(如:select * from table t where t.fruit='1' or t.fruit='2'的形式)

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值