I T H

[스프링프로젝트연습 14 - 2] .js 파일 분리 및 ajax공통메서드 생성 본문

Spring Basic

[스프링프로젝트연습 14 - 2] .js 파일 분리 및 ajax공통메서드 생성

thdev 2024. 1. 22. 14:43
해당 프로젝트 jsp 파일 내에 javascript 코드가 있어서 복잡해보인다. 따로 분리 시켜서 코드가독성을 증가하려고 함.
중복된 코드는 하나의 공통메서드로 관리하려고 함.

 

ㄱ.   .js 파일들 jsp에서 분리

- 먼저 resources 파일 아래 ajax 공통메서드들만 모아놓을 ajax.js 파일과 crud.js 파일을 만든다.

 

 

- home.jsp의 <script> 파일들 모두들 crud.js로 옮기고, $(function(){ }) 으로 묶어준다.

$(function(){

	//1.DATA INSERT
	$("#btnInsert").on("click", function(){
		var obj = {
				userId : $("#txtUserId").val(),
				userPwd : $("#txtUserPwd").val(),
				userName : $("#txtUserName").val(),
				userTel : $("#txtUserTel").val(),
				userEmail : $("#txtUserEmail").val(),
				userAuth : "1"
				
		}
		console.log(obj);
		
		$.ajax({
			type: "POST",
			url : "/main/addList.do",
			contentType: "application/json;charset=UTF-8",
			data: JSON.stringify(obj), //JSON형태로 말아서 전달함!!!
			dataType: "json",
			success: function(data) {
				console.log("save success!!");
				console.log(data);
			},
			error: function(){
				console.log("save통신실패!!");
			}
		});
	});
	
	// 2. DATA SEARCH
	$("#btnSearch").on("click", function() {
		var obj = {
				userId: $("#searchUserId").val(),
				userName: $("#searchUserName").val()
		}
		
		console.log(obj);
		
		$.ajax({
	        type: "POST",
	        url: "/main/searchList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("search success!!");
	          	console.log(data);
	          	
	          	// set table 
	          	var setHtml = ""; // String type 
	          	for(var i = 0; i < data.length; i++) {
	          		setHtml += "<tr class='trClick'>"; //tr클릭 이벤트 처리를 위해 클래스명을 추가
	          		setHtml += "<td>" + data[i].USER_ID + "</td>";
	          		setHtml += "<td>" + data[i].USER_PWD + "</td>";
	          		setHtml += "<td>" + data[i].USER_NAME + "</td>";
	          		setHtml += "<td>" + data[i].USER_TEL + "</td>";
	          		setHtml += "<td>" + data[i].USER_EMAIL + "</td>";
	          		setHtml += "<td>" + data[i].INPUT_DATETIME + "</td>";
	          		setHtml += "</tr>";
	          	}
	          	
	          	$("#tbl").html(setHtml);
				// 스크립트 내 위 구문 아래에 내용을 추가한다.
	          	
	          	// tr (행) 을 클릭한 경우 
	          	// td 값들을 업데이트 폼에 출력한다.
	          	$(".trClick").on("click", function() {
	          		var item = $(this)[0].childNodes;
	          		console.log("item", item);
	          		$("#txtModifyUserId").val(item[0].innerText);
	          		$("#txtModifyUserPwd").val(item[1].innerText);
	          		$("#txtModifyUserName").val(item[2].innerText);
	          		$("#txtModifyUserTel").val(item[3].innerText);
	          		$("#txtModifyUserEmail").val(item[4].innerText);
	          	});

	        },
	        error: function() {
	          	console.log('search 통신실패!!');
	        }
      	});
	});
	
	//3.DATA UPDATE
	$("#btnUpdate").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
				userPwd: $("#txtModifyUserPwd").val(),
				userName: $("#txtModifyUserName").val(),
				userTel: $("#txtModifyUserTel").val(),
				userEmail: $("#txtModifyUserEmail").val()
		}
		
		console.log(obj);
		
		$.ajax({
	        type: "POST",
	        url: "/main/updateList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("update success!!");
	          	console.log(data);
	        },
	        error: function() {
	          	console.log('update 통신실패!!');
	        }
		});
	});
	
	//4. DATA DELETE
	$("#btnDelete").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
		}
		
		console.log(obj);
		
		$.ajax({
	        type: "POST",
	        url: "/main/deleteList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("delete success!!");
	          	console.log(data);
	        },
	        error: function() {
	          	console.log('delete 통신실패!!');
	        }
		});
	});
})

 

- home.jsp에서  body태그 맨 밑에 .js파일을 호출하는 경로를 넣어줌.

- home.jsp 에서는 jsp 코드만 남게 된다.

<script src="/resources/ajax.js"></script>
<script src="/resources/crud.js"></script>

 

ㄴ.   ajax.js 파일에 ajax 공통메서드 생성

-  ajax 데이터 저장용 메서드(insert, update, delete) 와, 데이터 조회용 메서드를 작성한다.

//2023. 6. 28
// CRUD ajax 공통 메서드

//데이터 입력용 메서드(insert, update, delete)
function dataSaveAjax(url, obj, type){
	$.ajax({
		type: type,
		url: url,
		contentType:"application/json;charset=UTF-8",
		data:JSON.stringify(obj), //변수 obj를 json형태로 말아서 데이터로 보내줌.
		dataType: "json",
		success:function(data){
			console.log("data success!");
			console.log(data);
		},
		error:function(){
			console.log("data 통신실패");
		}
	});
}

//데이터 조회용 메서드
function dataFindAjax(url, obj, type, select){
	$.ajax({
		type: type,
		url: url,
		contentType:"application/json;charset=UTF-8",
		data:JSON.stringify(obj), 
		dataType: "json",
		success: select || function(data){
			console.log("data success!");
			console.log(data);
		},
		error:function(){
			console.log("search 통신실패");
		}
	});
}

 

- crud.js 파일에서 ajax.js에 만든 ajax 공통메서드를 호출한다.

 

[ 주석처리 - ajax공통 메서드 사용전]

$(function(){
	//1.DATA INSERT
	$("#btnInsert").on("click", function(){
		var obj = {
				userId : $("#txtUserId").val(),
				userPwd : $("#txtUserPwd").val(),
				userName : $("#txtUserName").val(),
				userTel : $("#txtUserTel").val(),
				userEmail : $("#txtUserEmail").val(),
				userAuth : "1"
				
		}
		console.log(obj);
		dataSaveAjax("/main/addList.do", obj, "POST");
		/*
		$.ajax({
			type: "POST",
			url : "/main/addList.do",
			contentType: "application/json;charset=UTF-8",
			data: JSON.stringify(obj), //JSON형태로 말아서 전달함!!!
			dataType: "json",
			success: function(data) {
				console.log("save success!!");
				console.log(data);
			},
			error: function(){
				console.log("save통신실패!!");
			}
		});
		*/
	});
	
	// 2. DATA SEARCH
	$("#btnSearch").on("click", function() {
		var obj = {
				userId: $("#searchUserId").val(),
				userName: $("#searchUserName").val()
		}
		
		console.log(obj);
		
		dataFindAjax("/main/searchList.do", obj, "POST", function(data){
			// set table
			var setHtml = ""; //String Type
			for(var i = 0; i <data.length; i++){
				setHtml += "<tr class='trClick'>"; //tr클릭 이벤트 처리를 위해 클래스명을 추가
				setHtml += "<td>" + data[i].USER_ID +"</td>";
				setHtml += "<td>" + data[i].USER_PWD +"</td>";
				setHtml += "<td>" + data[i].USER_NAME +"</td>";
				setHtml += "<td>" + data[i].USER_TEL +"</td>";
				setHtml += "<td>" + data[i].USER_EMAIL +"</td>";
				setHtml += "<td>" + data[i].INPUT_DATETIME +"</td>";
				setHtml += "</tr>";
			}
			$("#tbl").html(setHtml);
			
			//스크립트 내 위 구문 아래에 내용을 추가한다.
			// tr(행)을 클릭한 경우
			// td 값들을 업데이트 폼에 출력함.
			$(".trClick").on("click", function(){
				var item = $(this)[0].childNodes;
				console.log("item", item);
				$("#txtModifyUserId").val(item[0].innerText);
				$("#txtModifyUserPwd").val(item[1].innerText);
				$("#txtModifyUserName").val(item[2].innerText);
				$("#txtModifyUserTel").val(item[3].innerText);
				$("#txtModifyUserEmail").val(item[4].innerText);
			});
		});
	});
	
	//3.DATA UPDATE
	$("#btnUpdate").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
				userPwd: $("#txtModifyUserPwd").val(),
				userName: $("#txtModifyUserName").val(),
				userTel: $("#txtModifyUserTel").val(),
				userEmail: $("#txtModifyUserEmail").val()
		}
		
		console.log(obj);
		
		dataSaveAjax("/main/updateList.do", obj, "POST");
		/*
		$.ajax({
	        type: "POST",
	        url: "/main/updateList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("update success!!");
	          	console.log(data);
	        },
	        error: function() {
	          	console.log('update 통신실패!!');
	        }
		}); */
	});
	
	//4. DATA DELETE
	$("#btnDelete").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
		}
		
		console.log(obj);
		dataSaveAjax("/main/deleteList.do", obj, "POST");
		/*
		$.ajax({
	        type: "POST",
	        url: "/main/deleteList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("delete success!!");
	          	console.log(data);
	        },
	        error: function() {
	          	console.log('delete 통신실패!!');
	        }
		});
		*/
	});
})

 

- 코드가 얼마나 줄어드는지 주석을 지워보았다.

- 절반 이상으로 코드가 줄어드는 것을 볼수있음.

$(function(){
	//1.DATA INSERT
	$("#btnInsert").on("click", function(){
		var obj = {
				userId : $("#txtUserId").val(),
				userPwd : $("#txtUserPwd").val(),
				userName : $("#txtUserName").val(),
				userTel : $("#txtUserTel").val(),
				userEmail : $("#txtUserEmail").val(),
				userAuth : "1"
		}
		console.log(obj);
		dataSaveAjax("/main/addList.do", obj, "POST");
	
	});
	
	// 2. DATA SEARCH
	$("#btnSearch").on("click", function() {
		var obj = {
				userId: $("#searchUserId").val(),
				userName: $("#searchUserName").val()
		}
		
		console.log(obj);
		
		dataFindAjax("/main/searchList.do", obj, "POST", function(data){
			// set table
			var setHtml = ""; //String Type
			for(var i = 0; i <data.length; i++){
				setHtml += "<tr class='trClick'>"; //tr클릭 이벤트 처리를 위해 클래스명을 추가
				setHtml += "<td>" + data[i].USER_ID +"</td>";
				setHtml += "<td>" + data[i].USER_PWD +"</td>";
				setHtml += "<td>" + data[i].USER_NAME +"</td>";
				setHtml += "<td>" + data[i].USER_TEL +"</td>";
				setHtml += "<td>" + data[i].USER_EMAIL +"</td>";
				setHtml += "<td>" + data[i].INPUT_DATETIME +"</td>";
				setHtml += "</tr>";
			}
			$("#tbl").html(setHtml);
			
			//스크립트 내 위 구문 아래에 내용을 추가한다.
			// tr(행)을 클릭한 경우
			// td 값들을 업데이트 폼에 출력함.
			$(".trClick").on("click", function(){
				var item = $(this)[0].childNodes;
				console.log("item", item);
				$("#txtModifyUserId").val(item[0].innerText);
				$("#txtModifyUserPwd").val(item[1].innerText);
				$("#txtModifyUserName").val(item[2].innerText);
				$("#txtModifyUserTel").val(item[3].innerText);
				$("#txtModifyUserEmail").val(item[4].innerText);
			});
		});
	});
	
	//3.DATA UPDATE
	$("#btnUpdate").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
				userPwd: $("#txtModifyUserPwd").val(),
				userName: $("#txtModifyUserName").val(),
				userTel: $("#txtModifyUserTel").val(),
				userEmail: $("#txtModifyUserEmail").val()
		}
		console.log(obj);
		
		dataSaveAjax("/main/updateList.do", obj, "POST");
	});
	
	//4. DATA DELETE
	$("#btnDelete").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
		}
		
		console.log(obj);
		dataSaveAjax("/main/deleteList.do", obj, "POST");
	});
})

 

ㄷ.  조회용 공통메서드 생성 및 사용

 

 

[최종 crud.js 코드]

$(function(){

	//데이터 조회용 공통 메서드
	function dataSelect(){
		//alert("select");
		var obj = {
				userId: $("#searchUserId").val(),
				userName: $("#searchUserName").val(),
		}
		
		console.log(obj);
		
		dataFindAjax("/main/searchList.do", obj, "POST", function(data){
			// set table
			var setHtml = ""; //String Type
			for(var i = 0; i <data.length; i++){
				setHtml += "<tr class='trClick'>"; //tr클릭 이벤트 처리를 위해 클래스명을 추가
				setHtml += "<td>" + data[i].USER_ID +"</td>";
				setHtml += "<td>" + data[i].USER_PWD +"</td>";
				setHtml += "<td>" + data[i].USER_NAME +"</td>";
				setHtml += "<td>" + data[i].USER_TEL +"</td>";
				setHtml += "<td>" + data[i].USER_EMAIL +"</td>";
				setHtml += "<td>" + data[i].INPUT_DATETIME +"</td>";
				setHtml += "</tr>";
			}
			$("#tbl").html(setHtml);
			
			//스크립트 내 위 구문 아래에 내용을 추가한다.
			// tr(행)을 클릭한 경우
			// td 값들을 업데이트 폼에 출력함.
			$(".trClick").on("click", function(){
				var item = $(this)[0].childNodes;
				console.log("item", item);
				$("#txtModifyUserId").val(item[0].innerText);
				$("#txtModifyUserPwd").val(item[1].innerText);
				$("#txtModifyUserName").val(item[2].innerText);
				$("#txtModifyUserTel").val(item[3].innerText);
				$("#txtModifyUserEmail").val(item[4].innerText);
			});
		});
	};
	
	//1.DATA INSERT
	$("#btnInsert").on("click", function(){
		var obj = {
				userId : $("#txtUserId").val(),
				userPwd : $("#txtUserPwd").val(),
				userName : $("#txtUserName").val(),
				userTel : $("#txtUserTel").val(),
				userEmail : $("#txtUserEmail").val(),
				userAuth : "1"
		}
		console.log(obj);
		alert("데이터가 입력 되었습니다.");
		dataSaveAjax("/main/addList.do", obj, "POST");
	
	});
	
	// 2. DATA SEARCH
	$("#btnSearch").on("click", function() {
		dataSelect(); //데이터 조회용 메서드 호출
	});
	
	//3.DATA UPDATE
	$("#btnUpdate").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
				userPwd: $("#txtModifyUserPwd").val(),
				userName: $("#txtModifyUserName").val(),
				userTel: $("#txtModifyUserTel").val(),
				userEmail: $("#txtModifyUserEmail").val()
		}
		console.log(obj);
		
		dataSaveAjax("/main/updateList.do", obj, "POST");
		alert("메서드 실행");
		dataSelect(); //데이터 조회용 메서드 호출
	});
	
	//4. DATA DELETE
	$("#btnDelete").on("click", function(){
		var obj = {
				userId: $("#txtModifyUserId").val(),
		}
		
		console.log(obj);
		dataSaveAjax("/main/deleteList.do", obj, "POST");
		alert("메서드 실행");
		dataSelect(); //데이터 조회용 메서드 호출
	});
})

 

 

'Spring Basic' 카테고리의 다른 글

[스프링프로젝트연습 16] 스프링 프로젝트 구현 - CRUD 서비스 로직 추가  (0) 2024.01.22
[스프링프로젝트연습 15] 스프링 프로젝트 구현 - 트랜잭션 처리  (0) 2024.01.22
[스프링프로젝트연습 14] 스프링 프로젝트 구현 - ajax사용 /CRUD - DELETE  (0) 2024.01.22
[스프링프로젝트연습 13] 스프링 프로젝트 구현 - ajax사용 /CRUD - UPDATE  (0) 2024.01.22
[스프링프로젝트연습 12] 스프링프로젝트 구현 - ajax사용 /CRUD-SELECT  (0) 2024.01.22
'Spring Basic' Related Articles more