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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
angular 用Observable实现异步调用的方法
Dec 27 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
js实现九宫格布局效果
May 28 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
一些星际专用术语解释
2020/03/04 星际争霸
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
详解python进行mp3格式判断
2016/12/23 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python实现flappy bird小游戏
2018/12/24 Python
Python实现AI换脸功能
2020/04/10 Python
python操作链表的示例代码
2020/09/27 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
巴西网上药房:onofre
2016/11/21 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
建议书标准格式
2014/03/12 职场文书
单位委托书怎么写
2014/09/21 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
mysql 排序失效
2022/05/20 MySQL