雖然也使用了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 to solve. 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。 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 source from XML to JSON for the low efficiency of XML.
Now the source from XML 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 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 man ment of AJ. 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); //製品カテゴリ データ |
this.validDataUrl = validDataUrl; //検証データ パス
this.validData = validData; //製品検証データ
this.prodType = $(prodType); //製品検証製品タイプ
this.prodPack = $(prodPack); //製品検証パッケージ
this.prodDate = prodDate; //製品検証日 製品日付
this.prodPatch = prodPatch; //製品検証バッチ ID
this.prodImg = $(prodImg); | 製品イメージ
this.validBtn = $(validBtn); //製品検証ボタン
this.validMsg = $(validMsg); //製品検証プロセスのプロンプト
this. ();
},
init:function(){// アプリケーションの初期化
this.productTypeBind();
this.prodType.observe("change",this.productTypeChange . binding(this));
this.prodPack.observe("change",this.productPackChange.bind(this));
this.validBtn.observe("click",this.productValid.bind(this ) );
},
productTypeBind:function(){//バインディング製品カテゴリ ドロップダウン リスト データ | バインディング製品タイプ データ
this.prodPack.selectedIndex = 0; //ページ更新後の IE の場合🎜>var o = this.prodType;
this.prodData.each(function(pair){
o.options.add(new Option(pair.key, pair.value.code));
});
},
productTypeChange:function(e){//製品タイプ
var o = this.prodPack; の製品カテゴリ ドロップダウン リスト イベントリスナー | 1;
o.selectedIndex = 0; //IE の場合、最初に選択された
this.prodImg.writeAttribute("src",o[0].id); .selectedIndex ;
if (selected!=0){
this.productPackBind(this.prodType[selected].text);
}
},
productPackBind:function(choosedValue){ // 製品パッケージのドロップダウン リスト データのバインディング | 製品パッケージのデータのバインディング
var o = this.prodPack
$H(this.prodData.get(choosedValue).type).each(function(pair);
var newOption = 新しいオプション(pair.key, ペア.value.packing);
newOption.id = ペア.value.img;
o.options.add(newOption); ;
},
productPackChange:function(e){// 製品パッケージのドロップダウン リスト イベント リスナー |
var o =
this.prodImg.writeAttribute( "src",o [o.selectedIndex].id);
},
productValid:function(){//製品の検証
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{
製品とパッケージを選択してください。 ");
}
}else{
alert("製品の製造日と製品のバッチ番号を入力してください。");
}
},
_validProd:function( oReq) {//製品検証 Ajax コールバック
this.validMsg.hide();
var v1 = this.prodType.getValue(), v2 = this.prodPack.getValue(); $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"); 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");
});
