Node.js , JQuery | 테이블 만들기 | 데이터 등록(1)

먼저 등록하고자 하는 데이터들을 text에 담아 ajax로 보내고, 백엔드에서 쿼리문으로 DB에 내용이 추가되도록 한다.

 

1. 클라이언트는 form으로 데이터들을 submit할 수 있게 만들어준다.

<div id="car-form-div" class="panel-body">
	<form id="car-form" action="" method="post" class="form-horizontal" data-parsley-validate="true" name="car-form" onsubmit="carJoin();">
		<div class="form-group row m-b-15">
			<label class="col-md-4 col-sm-4 col-form-label" for="CN">{{__('car_number')}} <span class="text-danger">*</span> :</label>
			<div class="col-md-8 col-sm-8">
				<input class="form-control" type="String" id="CN" name="CN" placeholder="{{__('car_number_msg')}}" data-parsley-required="true" data-parsley-error-message="{{__('required_detail')}}" data-parsley-trim-value="true" />
			</div>
		</div>
		<div class="form-group row m-b-15">
			<label class="col-md-4 col-sm-4 col-form-label" for="CN">{{__('car_customer_phone')}} :</label>
			<div class="col-md-8 col-sm-8">
				<input class="form-control" type="String" id="CPN" name="CPN" placeholder="{{__('car_customer_phone')}}" data-parsley-type="digits" data-parsley-type-message="{{__('register_digits_error')}}" data-parsley-trim-value="true" />
			</div>
		</div>
		<div class="form-group row m-b-0">
			<label class="col-md-4 col-sm-4 col-form-label">&nbsp;</label>
			<div class="col-md-8 col-sm-8">
				<button type="submit" class="btn btn-primary width-80">{{__('registration')}}</button>
				<button type="reset" class="btn btn-primary width-80">{{__('reset')}}</button>
			</div>
		</div>
		<!--현재 시간 변수-->
		<input type="hidden" class="form-control" name = "Ctime" id = "Ctime" />
	</form>
</div>

 

2. script 쪽에서 데이터들을 검증한 뒤에 ajaxJoin() 함수를 실행해준다.

// 차량 등록 ajax
	function carJoin() {
		var formParsley  = $('#car-form').parsley();
		if(formParsley.isValid() == true) {
			ajaxJoin('/car/car_join', i18nconvert, { CN: document.getElementsByName("CN")[0].value, CPN: document.getElementsByName("CPN")[0].value });
		}
		event.preventDefault();
	}

 

3. ajaxJoin 함수에서 백엔드로 데이터를 전송하고, 받아올 데이터에 따라 실행 될 내용들을 정의해준다.

// 공통 등록(차량, 장비)
function ajaxJoin(url, i18nconvert, data) {
	console.log(data)
    $.ajax({
        type: 'POST',
        url: url,
        dataType: 'json',
        data: {
            data : JSON.stringify(data)
        }
    }).done(function(data) {
        if(data.type == 'device') {
            if(data.result == 'success') {
				alert(i18nconvert('device_register_success'));
				location = '/device_list';
			}
			else if(data.result == 'exist') {
				alert(i18nconvert('device_duplicated'));
			}
			else if(data.result == 'type') {
				alert(i18nconvert('device_mac_wrong'));
			}
			else {
				alert(i18nconvert('device_register_fail'));
			}
        }
		else if(data.type == 'car') {
			if(data.result == 'success') {
				alert(i18nconvert('car_register_success'));
				location = '/car_list';
			}
			else if(data.result == 'exist') {
				alert(i18nconvert('car_exist_error'));
			}
			else if(data.result == 'type') {
				alert(i18nconvert('car_type_error'));
			}
			else if(data.result == 'length') {
				alert(i18nconvert('car_length_error'));
			}
			else if(data.result == 'excelType') {
				alert(i18nconvert('car_exceltype_error'));
			}
			else if(data.result == 'excelLength') {
				alert(i18nconvert('car_excellength_error'));
			}
			else {
				alert(i18nconvert('car_register_fail'));
			}
		}
    });
}