Javascript 계단식 드롭다운 메뉴 및 AJAX 데이터 검증 핵심 code_javascript 기술

Prototype.js를 사용하여 작성하기도 하지만 이에 대한 이해가 부족하여 클래스 구현에서는 여전히 "JavaScript Advanced 프로그래밍"의 메소드를 사용합니다. 데이터 검증을 위해 AJAX를 사용할 때 처음에는 XML을 데이터 소스로 사용했지만, 일정 기간 사용한 후 XML이 너무 비효율적이라는 것을 알게 되어 JSON을 데이터 소스로 사용했습니다.

1년이 지났고 고객이 새로운 요구 사항을 제시했습니다. 처음에는 입력 상자의 두 데이터만 일치하면 됩니다. 이제 요구 사항은 두 드롭다운 메뉴의 데이터가 일치해야 한다는 것입니다. 그래서 저는 이 기회를 이용하여 코드를 리팩터링했습니다.

요구사항:
1. 드롭다운 메뉴에서 제품명 및 제품 포장 선택에 따라 오른쪽 그림이 변경되어야 합니다.
2. 제품명, 제품 포장, 생산 날짜, 생산 배치가 모두 올바른 것으로 확인되면 오른쪽 그림에 해당 프롬프트가 나타납니다.

간단한 설명:
Prototyp.js를 사용하여 클래스 구성을 완료하고, 객체 지향 방식으로 기능을 구현하고, 이벤트 지향으로 코드를 더 명확하게 하고, AJAX 상태 관리를 사용합니다. 검증이 가능하도록 프로세스가 더욱 사용자 친화적이고 데이터 소스로서 JSON의 실행 효율성도 만족스럽습니다.
링크 드롭다운 목록 및 AJAX 유효성 검사
이 JS 스크립트는 나에게 특별한 의미가 있습니다.
1년 전에 새로운 시작을 했을 때 첫 번째 작업은 이 링크 드롭다운 목록과 데이터 유효성 검사를 해결하는 것이었습니다. 당시 저는 Javascript에 대한 깊은 이해가 없었기 때문에 동료의 코드를 참고한 후 며칠 만에 끝냈습니다.
코드 작성에는 Prototype.js를 사용했지만 여전히 그 방법을 사용했습니다. AJAX 유효성 검사 과정에서 처음에는 XML을 데이터 소스로 사용했지만 시간이 지나면 XML의 효율성이 낮아 데이터 소스를 XML로 변경했습니다.
새로운 요구 사항을 확인하려면 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); //제품 카테고리 데이터 | 제품 유형 데이터
this.validDataUrl = validDataUrl; //검증 데이터 경로
this.validData = validData; //검증 데이터 | 제품 데이터
this.prodType = $(prodType); //제품 검증 카테고리 | 제품 유형
this.prodPack = $(prodPack) //제품 검증 패키지 | this.prodDate = prodDate; //제품 검증 날짜 ID | 제품 날짜
this.prodPatch = prodPatch; //제품 검증 배치 ID | 제품 배치
this.prodImg = $(prodImg); | 제품 이미지
this.validBtn = $(validBtn); //제품 확인 버튼 | 유효성 검사 버튼
this.validMsg = $(validMsg) //제품 확인 메시지
init. ();
},
init:function(){//프로그램 초기화 | 애플리케이션 초기화
this.productTypeBind()
this.prodType.observe("change",this.productTypeChange . 바인딩(this));
this.prodPack.observe("change",this.productPackChange.bind(this))
this.validBtn.observe("click",this.productValid.bind(this) );
},
productTypeBind:function(){//제품 카테고리 드롭다운 목록 데이터 바인딩 | 제품 유형 데이터 바인딩
this.prodPack.selectedIndex = 0 //페이지 새로 고침 후
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
o.length = 1;
o.selectedIndex = 0; //첫 번째 항목을 패키징한 후의 IE
this.prodImg.writeAttribute("src",o[0].id) var selected = this.prodType .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 = new Option(pair.key, pair.value.packing);
newOption.id = pair.value.img;
o.options.add(newOption)}) ;
},
productPackChange:function(e){//제품 패키지 드롭다운 목록 이벤트 리스너 | 제품 패키지의 이벤트 리스너
var o = this.prodPack
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{
alert(" 제품과 포장을 선택해주세요! ");
}
}else{
alert("제품 생산일자와 제품 배치번호를 입력해주세요!");
}
},
_validProd:function( oReq) {//제품 확인 Ajax 콜백
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
// 경고( v1 "n" v2 "n" v3 "n" v4 "n" imgUrl);
var prodBatchs = oreq.responseText.evalJSON()[this.validData]
var result=prodBatchs.any( 함수( 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")
});