简要说明: 使用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"); });