在ssh框架用ajax和jquery下实现多选传值到后台

朴灿烈づ我的快乐病毒、 2022-06-10 10:07 144阅读 0赞

由于要考核了，我要做一个在前台全选并把值传到后台操作，因此在实现功能后写下这篇博客，希望对你们有用![吐舌头][tongue.gif]![吐舌头][tongue.gif]![吐舌头][tongue.gif]

![Center][]

![Center 1][]

![Center 2][]

以下是js部分，使用的前提是下载jquery.min.js插件  地址是[jquery.min.js插件][jquery.min.js]

$(function(){
    	    // 设置属性值
    	    $("input:button").click(function() {
    	        var many = "";
    	        $("input:checkbox[name='many']:checked").each(function() {
    	        	many += $(this).val() + " ";
    	        });
    	        alert("已选择水果："+many);
    	        
    	        
    	        
    	        var xmlhttp;
    			if (window.XMLHttpRequest) {
    				// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    				xmlhttp = new XMLHttpRequest();
    			} else {
    				// IE6, IE5 浏览器执行代码
    				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			xmlhttp.onreadystatechange = function() {
    				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {		
    					var result = xmlhttp.responseText;								
    					if(parseInt(result)==1){
    						show_notice('备案成功',1);
    					}else{
    						show_notice('备案失败',1);
    					}
    								
    				}
    			}
    			xmlhttp.open("POST", "AdminAction_fileAll", true);
    			xmlhttp.setRequestHeader("Content-type",
    					"application/x-www-form-urlencoded");
    			xmlhttp.send("many="+many);     
    	    });
    	})
    	
    	function show_notice(str,second,callback){  
    	    var box_id = 'notice_box';  
    	    var tooltipBox = document.getElementById(box_id);  
    	    if(tooltipBox){  
    	        document.body.removeChild(tooltipBox);  
    	    }  
    	    if(!second) second = 2;  
    	    tooltipBox = document.createElement('div');  
    	    tooltipBox.innerHTML = str;  
    	    tooltipBox.id = box_id;  
    	    tooltipBox.style.background='rgba(94,94,94,.8)';  
    	    tooltipBox.style.color='#fff';  
    	    tooltipBox.style.display='inline-block';  
    	    tooltipBox.style.padding = '0.4em 1.5em';  
    	    tooltipBox.style.borderRadius = '1em';  
    	    tooltipBox.style.fontSize = '0.9em';  
    	    document.body.appendChild(tooltipBox);  
    	    var vWidth = document.documentElement.clientWidth;  
    	    var vHeight = document.documentElement.clientHeight;  
    	    tooltipBox.style.position = 'fixed';  
    	    tooltipBox.style.zIndex = '9999';  
    	    tooltipBox.style.left = ((vWidth/2)-(tooltipBox.offsetWidth/2))+'px';  
    	    tooltipBox.style.top = ((vHeight/2)-(tooltipBox.offsetHeight/2))+'px';  
    	    setTimeout(function () {  
    	                    document.body.removeChild(tooltipBox);  
    	                    if(callback)    callback();  
    	                }, second*1000);  
    	}

HTML/JSP部分 如果这个页面是从后台数据库查出来的数据放到前台的，你就在需要传的那个值的那一列加上

在forEach循环外加上

后台用this.getResponse().getWriter().println(1);把信号返回到前台

OK，工作就到此结束了。

[tongue.gif]: /images/20220610/317db883fb7044bf9fe1f21e322bb01d.png
[Center]: /images/20220610/f904bbcbf57e465db88bdb8456542de8.png
[Center 1]: /images/20220610/c0b375b71ac24f82b9ebff1b62301c5f.png
[Center 2]: /images/20220610/1efd84c8441a4b8b8ca004a49bae7725.png
[jquery.min.js]: http://www.veryhuo.com/down/html/jquery-tools-min-js.html