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

首页 > 网络编程 > JavaScript > javascript技巧 更新日期: 2016-04-14
最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次,感兴趣的朋友们可以借此学习一下
虽然也使用了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");
});

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jquery无限级联下拉菜单简单实例演示
    jquery无限级联下拉菜单简单实例演示
    这篇文章主要向大家推荐了一个jquery无限级联下拉菜单简单实例演示,感兴趣的小伙伴们可以参考一下本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路.分享给大家供大家参考.具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1.效果图一:   2.效果图二:   3.效果图三 ...
  • javascript手风琴下拉菜单实现代码
    javascript手风琴下拉菜单实现代码
    手风琴效果的下拉菜单大家都有见到过吧,实现的方法也有很多,这篇文章就为大家分享了javascript手风琴下拉菜单实现代码,纯手写的,感兴趣的朋友不要错过.手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTY ...
  • JavaScript模拟下拉菜单代码
    公司最近一个项目中,出现了一个非window主题外观的下拉菜单,于是自己搞了个.优点:点击body区域同样可以隐藏下拉菜单,且不会和body已有的onclick事件冲突. 缺点:请大家指出,虚心接受!运行框代码看似繁多,实属无奈,请下载附件,以便更好观察或修改~! 下拉菜单 JavaScript模拟下拉菜单,做的仓促,虚心接受批评. 如需引入外部Js需刷新才 ...
  • JavaScript多级下拉菜单代码(简单实用)
    JavaScript下拉菜单实现代码,js与css的良好结合.喜欢的朋友可以测试下. JavaScript下拉菜单 栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1->菜单4 栏目2 栏目2->菜单1 栏目2->菜单2 栏目2->菜单3 栏目2->菜单4 栏目2->菜单5 栏目3 栏目 ...
  • JavaScript双级下拉菜单实现代码
    JS+CSS共同结合完成的双级下拉菜单,符合WEB标准,可作为一个标准的实例来掌握. JavaScript下拉菜单 栏目1 栏目2->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1 栏目1->菜单1 栏目1->菜单2 栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 如需引入外部Js需刷新才能执 ...
猜你喜欢