checkbox选中并通过ajax传数组到后台接收

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了checkbox选中并通过ajax传数组到后台接收，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

这次讲的是通过复选框，选中，点击提交，并将值chuan到后台controller。这个应用是比较广的，什么批量修改，批量添加，授权管理等等，都用到这个。其实这个还是挺简单的，并没有想象中的那么难，但我看到不少朋友在此处受挫，当然曾经的我也是如此。现在给大家贴个代码分享下吧。

本文中使用的是layui框架，当然也可以不引进它，不过jquery的库还是要的。

该示例环境是spring+springmvc+mybatis plus+jdk8+MysqL57+maven3以上+window10(linux也没问题)

对mybatis plus不了解的，可以参考我的文章MP实战系列,或者去mybatis plus官网了解。

springmvc不知道的，或者基本使用都有困难的，可以参照我的Java相关框架资料及其基础资料、进阶资料、测试资料之分享 这篇文章，里面有很多资料,小白人员强烈建议参考

当有一定基础的还是建议看书和去官网看文档

我现在就时常看书和文档，官网虽然是英文的，但是现在很多翻译工具，所以阅读起来不是特别困难。不过建议有英文基础的还是要看英文。我自己时常记单词，尝试阅读英文文档。

test.html

<!DOCTYPE html>
<htmlheadMeta charset="UTF-8"title>开锁方式</link rel="stylesheet" href="../../layui/css/layui.css" media="all"body<!-- 隐藏域 -->
input type="hidden" id="lockNo"/>
="userId"/>

form class="layui-form" action="#">
    br/>


  div ="layui-form-item"label ="layui-form-label">初始开锁label="layui-input-block">
      ="checkBox" name="first_way" title="人脸识别" value="1" checked="checked"="密码"="2"="蓝牙"="3"="NFC"="4"div>
  >

  >后续开锁="laster_way"="远程开锁"="指纹触摸"="其他"/>
  button ="layui-btn"="update">立即提交buttonform>
 



 js script src="../../js/jquery-1.11.3.min.js"></script="../../layui/layui.js" charset="utf-8"="../../layui/lay/modules/layer.js" type="text/javascript"="../../layui/lay/modules/form.js"="../../js/test.js">

 

test.js

/**
 * 开锁方式
 */

  window.onload=function(){  
  
        GetRequest();
        autoLoad();
     
    };  
    
  
    
    //截取URL参数
    function GetRequest() {
          var fullURL = window.location.href;
     
           var url = location.search; //获取url中"?"符后的字串
           var theRequest = new Object();
     
           if (url.indexOf("?") != -1) {
              var str = url.substr(1);
              strs = str.split("&");
          
              for(var i = 0; i  strs.length; i ++) {
                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                 
                 $("#lockNo").val(theRequest[strs[i].split("=")[0]]);
                 
              }
           }
           return theRequest;
        }
    
    
  //自动加载获取Cookie   
    function autoLoad(){
        
        var str ="获取Cookie";
        $.ajax({
            url:"/lms/userauths/getCookie",type:"POST",data : {"str":str},dataType : 'json',success:function(data){
            
            var json = eval("("+data+")");
            
            if(json.returnCode=="200"){
                $("#userId").val(json.userId);
            }else if(json.returnCode=="500"){
                window.location.href='view/Login.html';
            }else{
                alert("有问题，请联系管理员");
            }
                
            },error:function(){
                alert("失败");
            }
        });
    }
    
  $(function(){
      
      //修改开锁方式
     $("#update").click(function(){
         
         var items = [];
         var lockNo = $("#lockNo").val();
         var items2 = [];

         $("input[name='first_way']:checked").each(function() {

             items.push($(this).val());
        
         });
         
         $("input[name='laster_way']:checked").each(function() {

             items2.push($(this).val());
        
         });


         $.ajax({

          type: "post",url: "/lms/lock/openLockModify",data: {items: items.join(','),items2:items2.join(',lockNo:lockNo},async:false,success: function(data){
              
             var json = eval("("+data+")");
             =="200"){
                 alert(json.returnMsg);
                 closeLayui();
             }else if(json.returnCode=="500"){
                 alert(json.returnMsg);
             }else{
                 alert("有异常,请联系管理员");
             }
            
          },error:function(){
              alert("有异常");
          }

        });
     
     
     });
  
  
  });
  
  
  //关闭layui弹框
  function closeLayui(){
      parent.layer.closeAll()
 }

 

Controller代码

    @PostMapping(value="openLockModify")
    public String openLockModify(String lockNo,OpenLockWayQueryVo openLockWayQueryVo) {
        
        logger.info("lockNo:"+lockNo);
        String items[]=openLockWayQueryVo.getItems();
        
        String items2[]=openLockWayQueryVo.getItems2();
        
        String str="";
        
        String str2="";
        
        for (int i = 0; i < items.length; i++) {
            logger.info("itmes:"+items[i]);
            str+=items[i];
        
        }
        
        logger.info("items拼接后为:"+str);
        
        int i = 0; i < items2.length; i++) {
            logger.info("items2:"+items2[i]);
            str2+=items2[i];
        }
        
        logger.info("items2拼接后为:"+str2);
        
        EntityWrapper<LockEntity> wrapper = new EntityWrapper<LockEntity>();
        
        wrapper.eq("lock_no",lockNo);
        
        LockEntity lockEntity = lockService.selectOne(wrapper);
        
        //门锁实体,列出需要更新的属性
        LockEntity modifyLockEntity = new LockEntity();
        modifyLockEntity.setId(lockEntity.getId());
        modifyLockEntity.setLock_no(lockEntity.getLock_no());
        modifyLockEntity.setUserId(lockEntity.getUserId());
        modifyLockEntity.setFirstOpenWay(str);
        modifyLockEntity.setLasterOpenWay(str2);
        
        boolean isModifyLock = lockService.updateById(modifyLockEntity);
                
        Map<String,Object> map = new HashMap<String,Object>();

        if(isModifyLock) {
            map.put("returnCode","200");
            map.put("returnMsg","修改开锁方式成功");
        }else {
            map.put("returnCode","500"修改开锁方式失败");
        }    
        return JSON.toJSONString(map);
    }

 

OpenLockWayQueryVo.java
import java.util.Arrays;

public  OpenLockWayQueryVo {
    /**
     * 初次开锁方式
     */
    String items[];
    
    
     * 后续开锁方式
     * @return
     
    String items2[];
    
    
    
    
     String[] getItems2() {
         items2;
    }

    void setItems2(String[] items2) {
        this.items2 = String[] getItems() {
         items;
    }

     setItems(String[] items) {
        this.items = items;
    }

    @Override
     String toString() {
        return "OpenLockWayQueryVo [items=" + Arrays.toString(items) + "]";
    }
    
    
}

 

最后说明，不用mybatis plus单用mybatis也可以，只不过你只需将方法替换成你自己的即可。不过对于开发效率的提升，更好的专注于业务，建议能偷懒不自己写的，就不自己写。当然，这也是建立在mybatis用的非常熟练的前提下。如果一点都不熟，建议还是别偷懒了。想当初我也是一个一个的敲出来的，连xml文件都没有复制粘贴。

 

 原文链接：/ajax/868826.html

      

      
                 
              

            

          

          
          
          

            

              




            

          


          

            

              

                  
    
猜你在找的Ajax相关文章



                                    
网页的异步请求（Ajax）

                                
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...

                                
                                
                            



                                    
手动实现AJAX

                                
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...

                                
                                
                            



                                    
axios异步提交表单数据的不同形式

                                
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

                                
                                
                            



                                    
php的ajax简单实例

                                
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

                                
                                
                            



                                    
Json与Ajax(注册实例）

                                
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...

                                
                                
                            







                                    
jSon和Ajax登录功能，ajax数据交互案例

                                
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...

                                
                                
                            



                                    
关于AjaxControlToolkit的样式问题

                                
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

                                
                                
                            



                                    
一个简单的AJAX实现(HELLO AJAX)

                                
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

                                
                                
                            



                                    
AJAX中文乱码的两类问题及解决之策

                                
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...

                                
                                
                            



                                    
实例：AJAX返回xml代码如何在网页中显示

                                
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

                                
                                
                            







            

          

        

        
        
        
        

          
          

            

              

                
                
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号

                

              

            

          

          
         
          

            

              
 



              

            

          

          
          
          
          

            

              

                
                
              

            

          

          


          
          

            

              

                
                
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作