Javascript级联下拉菜单以及AJAX数据验证核心代码


Posted in Javascript onMay 10, 2013

虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了《JavaScript高级程序设计》里的方法。使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源。

一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次。

需求
1、根据下拉菜单产品名称、产品包装的选择,右面的图片要进行相应的变化。
2、产品名称、产品包装、生产日期、生产批次都验证正确后,右图出现相应的提示。

简要说明
使用Prototyp.js完成类的构建,面向对象的方式实现功能,事件导向让代码更清晰明了,使用AJAX的状态管理,让验证过程对用户更友好,JSON作为数据源的执行效率也让人满意。
Linkage Drop Down List And AJAX Validation
This JS script has special meaning for me.
I got a new start one year ago, the first task was to solve this linkage drop down list and data validation. At that time I had no deep understanding of Javascript. With my ability of study, after the reference to the code of colleague's, I finally finished it in several days.
Although I used Prototype.js to code, I still used the method in the to make up Class. In the process of AJAX validation, I used XML as data source at the beginning. Aftet time past, I changed data source from XML to JSON for the low efficiency of XML.
Now the clients have new requirements, they need four data to be validated. So I rebuild the scripts.
Requirements:
1. change images of products with the change of product name and package.
2. after the validation with product name, package, date, batch, change images of products.
Brief:
Construct class with Prototype.js, use OOP's approach and event management to make a clear idea.
The management of AJAX status let the process be more friendly for customer. I'm also satisfied with the efficiency of JSON.
核心代码 | Core Code:

var ValidProduct = Class.create(); 
ValidProduct.prototype = { 
initialize:function(prodData,validDataUrl,validData,prodType,prodPack,prodDate,prodPatch,prodImg,validBtn,validMsg){ 
this.prodData = $H(prodData); //产品类别数据 | product type data 
this.validDataUrl = validDataUrl; //验证数据路径 | product data url 
this.validData = validData; //验证数据 | product data 
this.prodType = $(prodType); //产品验证类别 | product type 
this.prodPack = $(prodPack); //产品验证包装 | product package 
this.prodDate = prodDate; //产品验证日期ID | product date 
this.prodPatch = prodPatch; //产品验证批次ID | product batch 
this.prodImg = $(prodImg); //产品验证图片 | product images 
this.validBtn = $(validBtn); //产品验证按钮 | validate button 
this.validMsg = $(validMsg); //产品验证过程提示 | validate message 
this.init(); 
}, 
init:function(){//程序初始化 | Application init 
this.productTypeBind(); 
this.prodType.observe("change",this.productTypeChange.bind(this)); 
this.prodPack.observe("change",this.productPackChange.bind(this)); 
this.validBtn.observe("click",this.productValid.bind(this)); 
}, 
productTypeBind:function(){//绑定产品类别下拉列表数据 | Binding product type data 
this.prodPack.selectedIndex = 0; //for IE after page refreshed 
var o = this.prodType; 
this.prodData.each(function(pair){ 
o.options.add(new Option(pair.key, pair.value.code)); 
}); 
}, 
productTypeChange:function(e){//产品类别下拉列表事件监听 | Eventlistener of product type 
var o = this.prodPack; 
o.length = 1; 
o.selectedIndex = 0; //for IE after packing choosed the first 
this.prodImg.writeAttribute("src",o[0].id); 
var selected = this.prodType.selectedIndex; 
if (selected!=0){ 
this.productPackBind(this.prodType[selected].text); 
} 
}, 
productPackBind:function(choosedValue){//绑定产品包装下拉列表数据 | Binding product package data 
var o = this.prodPack; 
$H(this.prodData.get(choosedValue).type).each(function(pair){ 
var newOption = new Option(pair.key, pair.value.packing); 
newOption.id = pair.value.img; 
o.options.add(newOption); 
}); 
}, 
productPackChange:function(e){//产品包装下拉列表事件监听 | Eventlistener of product package 
var o = this.prodPack; 
this.prodImg.writeAttribute("src",o[o.selectedIndex].id); 
}, 
productValid:function(){//产品验证 | validate product 
var v1 = $F(this.prodDate).strip(), v2 = $F(this.prodPatch).strip(); 
if(v1!=""&&v2!=""){ 
if(this.prodPack.selectedIndex != 0){ 
var validAjax = new Ajax.Request(this.validDataUrl,{ 
method:"get", 
parameters:"rnd="+Math.random(), 
onCreate: function(){ 
this.validMsg.show(); 
}.bind(this), 
onComplete:this._validProd.bind(this) 
}); 
}else{ 
alert("请选择产品及包装!"); 
} 
}else{ 
alert("请填好产品生产日期和产品批号!"); 
} 
}, 
_validProd:function(oReq){//产品验证Ajax callback 
this.validMsg.hide(); 
var v1 = this.prodType.getValue(), v2 = this.prodPack.getValue(); 
var v3 = $F(this.prodDate).strip(), v4 = $F(this.prodPatch).strip(); 
var imgUrl = this.prodPack[this.prodPack.selectedIndex].id; 
//alert(v1+"n"+v2+"n"+v3+"n"+v4+"n"+imgUrl); 
var prodBatchs = oreq.responseText.evalJSON()[this.validData]; 
var result=prodBatchs.any(function(a){ 
return (v3==a[1] && v4==a[0] && a[2].startsWith(v1) && v2==a[3]); 
}); 
if(result){ 
this.prodImg.writeAttribute("src", imgUrl.split(".")[0] + "-valid.jpg"); 
}else{ 
this.prodImg.writeAttribute("src", "images/invalid.jpg"); 
}; 
} 
} 
document.observe("dom:loaded",function(){ 
var validOne = new ValidProduct(prodTypeData,"data/batchs_new2.txt","batchs","productType", 
"productPack","prodate","probatch","credit-img","vaSubmit","ajaxsearch"); 
});
Javascript 相关文章推荐
<script defer> defer 是什么意思
May 10 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
关于vue中 $emit的用法详解
Apr 12 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
js实现坦克大战游戏
Feb 24 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
javascript级联下拉列表实例代码(自写)
May 10 #Javascript
jquery ui对话框实例代码
May 10 #Javascript
javascrip关于继承的小例子
May 10 #Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 #Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 #Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 #Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
JS中的三个循环小结
2017/06/20 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Tensorflow累加的实现案例
2020/02/05 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
临床医师个人自我评价
2014/04/06 职场文书
2014年教师节活动总结
2014/08/29 职场文书
个人职业及收入证明
2014/10/13 职场文书
贫困证明书范文
2015/06/16 职场文书
五一放假通知怎么写
2015/08/18 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
MySQL查询日期时间
2022/05/15 MySQL