服务器与运维

当前位置:澳门新莆京娱乐官网 > 服务器与运维 > Javascript级联下拉菜单以及AJAX数据验证核心代码_javascript技巧_脚本之家

Javascript级联下拉菜单以及AJAX数据验证核心代码_javascript技巧_脚本之家

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2019-12-28 22:25

即使如此也运用了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; //产物种类数据 | product type data this.validDataUrl = validDataUrl; //验证数据路线 | product data url this.validData = validData; //验证数据 | product data this.prodType = $; //付加物验证体系 | product type this.prodPack = $; //付加物验证包装 | product package this.prodDate = prodDate; //付加物验证日期ID | product date this.prodPatch = prodPatch; //产物验证批次ID | product batch this.prodImg = $; //付加物验证图片 | product images this.validBtn = $; //产物验证开关 | validate button this.validMsg = $; //产物验证进度提醒 | validate message this.init{//程序伊始化 | Application init this.productTypeBind(卡塔尔国; this.prodType.observe("change",this.productTypeChange.bind; this.prodPack.observe("change",this.productPackChange.bind; this.validBtn.observe("click",this.productValid.bind; }, productTypeBind:function(State of Qatar{//绑定成品体系下拉列表数据 | Binding product type data this.prodPack.selectedIndex = 0; //for IE after page refreshed var o = this.prodType; this.prodData.each{ o.options.add(new Option(pair.key, pair.value.code卡塔尔国卡塔尔; }State of Qatar; }, productTypeChange:function{//产物种类下拉列表事件监听 | Eventlistener of product type var o = this.prodPack; o.length = 1; o.selectedIndex = 0; //for IE after packing choosed the first this.prodImg.writeAttribute; var selected = this.prodType.selectedIndex; if { this.productPackBind(this.prodType[selected].text卡塔尔; } }, productPackBind:function{//绑定产物包装下拉列表数据 | Binding product package data var o = this.prodPack; $H(this.prodData.get.each{ var newOption = new Option(pair.key, pair.value.packingState of Qatar; newOption.id = pair.value.img; o.options.add; }, productPackChange:function{//付加物包装下拉列表事件监听 | Eventlistener of product package var o = this.prodPack; this.prodImg.writeAttribute("src",o[o.selectedIndex].id卡塔尔; }, productValid:function(State of Qatar{//付加物认证 | validate product var v1 = $F.strip(卡塔尔, v2 = $F.strip{ if(this.prodPack.selectedIndex Javascript级联下拉菜单以及AJAX数据验证核心代码_javascript技巧_脚本之家。!= 0){ var validAjax = new Ajax.Request(this.validDataUrl,{ method:"get", parameters:"rnd="+Math.random(), onCreate: function(){ this.validMsg.show, onComplete:this._validProd.bind; }else{ alert; } }else{ alert; } }, _validProd:function{//付加物验证Ajax callback this.validMsg.hide(卡塔尔国; var v1 = this.prodType.getValue(卡塔尔, v2 = this.prodPack.getValue(State of Qatar; var v3 = $F.strip(卡塔尔(قطر‎, v4 = $F.strip(State of Qatar; 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{ return (v3==a[1] && v4==a[0] && a[2].startsWith; if{ 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级联下拉菜单以及AJAX数据验证核心代码_javascript技巧_脚本之家

关键词:

上一篇:没有了

下一篇:没有了