文档章节

jQuery/javascript实现IP/Mask自动联想功能

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 939
阅读 13
收藏 0
点赞 0
评论 0
之前做一个云计算的项目,涉及到一个安全组自动联想的功能,思想是这样的:

安全组规则之间是可以相互引用的,也可以自己是自己手动输入的ip/mask,这时候可以加一个功能,实现securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
主要实现方式是:后台处理securityGroupName和SecurityGroupName的组合列表,并且在前台做相应的处理,处理为数组对象,此时对名称和id的联想基本实现,如果再加上ip/task,只需做一些处理,创建一个新数组,拼接到之前的name和id的数组上,这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。

以下主要是实现ip/mask的转换,涉及一个最小掩码的算法,比如当前ip是10.12.0.0,这个时候需要计算出最小掩码,算法是:将该ip分段处理,如果第一个数不为0(,此处单纯的理解为10进制,也可以处理成2进制数之后相应的判断),那么查看后一位是否为0,这里以第二位为例(12)。因为第一位10后面的数(12)不为零,第二位12的后面的数(0)为零,则对12处理。12处理成2进制数为:00001100,掩码可最后一个1的位置有关,此时得出的数是6,那么第一位后面不为0,则第一位取全掩8,此时得出的值为8+6=14,也就是说该ip最后取出的最小掩码为14,还有三个是固定的,大家都会(14,16,24,34),如果不是以此往下类推。

/**
 * IP自动联想
 *
 * @param input IP
 * @return IP/Task
 */
function getIpArray(input){
	var ipArray = input.split('.');

	for( var i = 0; i < 4; i++){
		if (ipArray[i] == undefined || ipArray[i] == ''){
			ipArray[i] = 0;
		}
//
//		if(ipArray[i].indexOf('0') == 0 && ipArray[i].length > 1){
//			ipArray[i] = ipArray[i].substring(1, ipArray[i].length);
//		}
	}

	return ipArray;
}

function every(arr, func){
	var aa = [];
	for( var i = 0; i < arr.length; i++){
		aa.push(func(arr[i]));
	}
	return aa;
}

function indexOfEnd(str){
	for( var i = str.length - 1; i >= 0; i--){
		if (str.charAt(i) == '1') {
			return 8 - (str.length - i) + 1;
		}
	}
	return 0;
}

function getPermissions(input){
	var ipArray = getIpArray(input);
	var ip = ipArray.join('.');

	var binaryIpArray = every(ipArray, function(oct){
		return Number(oct).toString(2);
	});

	var yanma = 0;
	for( var i = binaryIpArray.length - 1; i >= 0; i--){
		if(binaryIpArray[i] != 0){
			yanma = indexOfEnd(binaryIpArray[i]) + i * 8;
			break;
		}
	}

	var abc = [ 8, 16, 24, 32 ];
	var rstArray = [ ip + '/' + yanma ];
	for( var i = 0; i < abc.length; i++){
		if(abc[i] > yanma){
			rstArray.push(ip + '/' + abc[i]);
		}
	}

	return rstArray;
}


这里主要是在键盘事件触发的时候的一个脚本,实现自动联想
/**
		* 创建安全组自动联想DOM
		*/
		function createSgDom(input){
			var arrayObj = new Array();
			var ary = new Array();
			this.setNewAry([]);
			this.setAry([]);

			var autoData = jsonData.substring(1, jsonData.length -1).split(', ');
			for ( var element in autoData) {
				arrayObj.push(autoData[element]);
			}

			var permissions = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/;
			var ip_1 = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))[\.]?){1,3})$/;
			var str = /^[a-zA-Z]*([a-zA-Z]|[-])*$/;
			if(null != input && !str.test(input)){
				if(ip_1.test(input) || permissions.test(input)){
					var except = false;
					if(input.indexOf('.') > -1){
						var value = input.split('.');

						for(var val in value){
							var inVal = value[val];
							if(inVal.indexOf('0') == 0 && inVal.length > 1){
								except = true;
							}
							if(inVal>255){
								except = true;
							}
						}
					} else {
						if(input>255){
							except = true;
						}
					}
					if(!except){
						var ips = getPermissions(input);

						for(var ip in ips){
							ary.push(ips[ip]);
						}
					}
				}
			}

			if(ary != null){
				newAry = arrayObj.concat(ary);
			} else {
				newAry = arrayObj;
			}

			this.setNewAry(newAry);

			$('#suggest_value').autocomplete({
            	source: this.getNewAry(),
            	minLength: 0,
            	close: function(event, ui){
            	},
            	focus: function(event, ui){
					return false;
                },
                change: function(event, ui){
                },
                select: function(event, ui){
                	if(ui.item.label.indexOf('(') > -1 && ui.item.label.indexOf(')') > -1){
                		ui.item.value = ui.item.label.substring(0, ui.item.label.indexOf('('));
			    	}else{
			    		ui.item.value = ui.item.label.substring(0, ui.item.label.length);
			    	}
                }
            });
		}

最后:
//在输入框加上一个keyup事件,指定执行脚本:createSgDom($('#suggest_value').val());
// 引入自动联想插件和上面处理ip掩码的脚本
	<script type="text/javascript" src="theme/default/js/cbms/ip-permissions.js"></script>
	<%-- <script src="theme/default/jquery-ui/js/jquery-1.8.3.js" type="text/javascript"></script> --%>
    <script src="theme/default/jquery-ui/js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>


请支持原创,欢迎纠错,若转载,请注明出处。

© 著作权归作者所有

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 105
码字总数 63036
作品 0
南京
架构师
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

缅甸银河国际开户13170533331

解决这个问题涉及到两个方面的问题: 配置问题 、引入静态文件问题 1、配置问题 web.xml配置的DispatchServlet如下: [html] view plain copy springmvc org.springframework.web.servlet.D...

银河国际 ⋅ 05/26 ⋅ 0

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 43分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部