Javascript カスケード ドロップダウン メニューと AJAX データ検証コア code_javascript スキル

Prototype.js を使って書くこともありますが、理解不足のため、クラスの実装は依然として「JavaScript 高度なプログラミング」のメソッドを使用しています。データ検証に AJAX を使用する場合、当初は XML がデータ ソースとして使用されていましたが、しばらく使用した後、XML は非効率すぎることが判明したため、JSON がデータ ソースとして使用されました。

1 年が経過し、顧客は当初、入力ボックス内の 2 つのデータが一致することだけを要求していましたが、現在は 2 つのドロップダウン メニュー内のデータが一致する必要があります。も一致するため、この機会を利用してコードをリファクタリングしました。

要件:
1. ドロップダウン メニューでの製品名と製品パッケージの選択に応じて、右側の画像を変更する必要があります。
2. 製品名、製品パッケージ、製造日、製造バッチがすべて正しいことが確認されると、対応するプロンプトが右側の図に表示されます。

簡単な説明:
Prototyp.js を使用してクラスの構築を完了し、オブジェクト指向の方法で関数を実装し、イベント指向によりコードが明確になり、AJAX 状態管理を使用します。検証が可能になるため、プロセスがよりユーザーフレンドリーになり、データソースとしての JSON の実行効率も満足のいくものになります。
リンケージ ドロップダウン リストと AJAX 検証
この JS スクリプトは私にとって特別な意味があります。
私は 1 年前に新しいスタートを切り、最初のタスクはこのリンケージ ドロップダウン リストとデータ検証を解決することでした。当時私は Javascript を深く理解していませんでしたが、同僚のコードを参考にして、数日でようやく完成しました。
コーディングには Prototype.js を使用しました。 AJAX 検証のプロセスでは、最初は XML をデータ ソースとして使用していましたが、時間が経ち、XML の効率が低いため、データ ソースを XML から JSON に変更しました。新しい要件では、検証するために 4 つのデータが必要です。
要件:
1. 製品の検証後に、製品の画像を変更します。
概要:
Prototype.js でクラスを構築し、OOP のアプローチとイベント管理を使用して、AJAX ステータスを管理します。 JSON の効率性にも満足しています。
コードは次のとおりです。

var ValidProduct = Class.create();
ValidProduct.prototype = {
initialize:function(prodData,validDataUrl,validData,prodType,prodPack,prodDate,prodPatch,prodImg,validBtn,validMsg) {
this.prodData = $H(prodData); //Product category data | product type data
this.validDataUrl = validDataUrl; //Validation data path | product data url
this.validData = validData; //Verification data | product data
this.prodType = $(prodType); //Product verification category | product type
this.prodPack = $(prodPack); //Product verification package | product package
this.prodDate = prodDate; //Product verification date ID | product date
this.prodPatch = prodPatch; //Product verification batch ID | product batch
this.prodImg = $(prodImg); //Product verification Pictures | product images
this.validBtn = $(validBtn); //Product verification button | validate button
this.validMsg = $(validMsg); //Product verification process prompts | validate message
this. init();
},
init:function(){//Program initialization | 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 category drop-down list data | 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){//Product category drop-down list event listener | Eventlistener of product type
var o = this.prodPack;
o.length = 1;
o.selectedIndex = 0; //for IE after packing chosen 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 drop-down list data | 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){//Product package drop-down list event listener | Eventlistener of product package
var o = this.prodPack;
this.prodImg.writeAttribute("src",o [o.selectedIndex].id);
},
productValid:function(){//Product validation | 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("Please select product and packaging ! ");
}
}else{
alert("Please fill in the product production date and product batch number!");
}
},
_validProd:function(oReq) {//Product verification 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");
});