본문 바로가기

개발중/Spring

Ajax 을 이용한 insert

728x90
반응형

Ajax 을 이용하는 법이 늘 궁굼했는데 오늘 Ajax을 이용해서 Insert하는 법을 배웠다.

 

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
  <style type="text/css">
    *{font-size: 16pt; }
    a{text-decoration:none;font-size: 16t;  color:blue ;}
    a:hover{font-size: 18pt;  text-decoration:underline; color:green ;  }
  </style>

	<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#add').on('click', function(){
		        $.ajax({
		            url: "insertProc.do",
		            type: "POST",
		            data: $('#frm').serialize(),
		            success: function(data){
		                location.href="listUser.do";
		            },
		            error: function(){  alert("신규등록 error");  }
		        });
		    });
		});	
	</script>
</head>
<body>
[추가하기 화면]<br><br>
<form  id="frm" method="post">
<table>
	<tr>
		<td>이름</td>
		<td><input type="text"  name="name" id="name"></td>
	</tr>	
	<tr>	
		<td>나이</td>
		<td><input type="text"  name="age" id="age"></td>
	</tr>
	<tr>	
		<td>취미</td>
		<td><input type="text"  name="hobby" id="hobby"></td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button"  id="add" value="추가하기">
		</td>
	</tr>
</table>
</form>

<br>
<a href="index.jsp">[index.jsp]</a>
<a href="insert.do">[신규등록]</a>

<!--
	drop table user1;
	
	create table user1(
	  name varchar2(10) primary key,
	  age number,
	  hobby varchar2(16)
	 );
	
	select * from user1;
	delete from user1; 
 -->
</body>
</html>

 

 

'추가하기' 버튼을 누르면

 

 

 

 

 

 

 

 

 

script 함수가 호출이 된다.

 

 

 

 

 

 

 

 

 

 

   

insertProc.do 를

POST 타입으로 호출하면서 

 

 

 

 

 

 

'frm' 에 있는 데이터들을

 

 

 

 

 

 

 

 

 

 

 

setialize() 를 사용함으로써

frm 에 있는 데이터를

모두 가져올 수 있게 된다.

 

 

 

 

 

 

 

 

 

 

 

UserDTO 를 매개 객체로 받는다.

아마 setialize 로 모든 데이터를 가져오면서 DTO 가 전달되는 것 같다.

 

 

 

 

 

 

UserDTO.java 는 이렇게 정의 되어 있다.

package net.hb.encore;

import org.springframework.stereotype.Component;

public class UserDTO {
	private String name;
	private int age;
	private String hobby;
	
	public String getName() {	return name;	}
	public void setName(String name) {	this.name = name;	}
	public int getAge() {return age;	}
	public void setAge(int age) {this.age = age;	}
	public String getHobby() {	return hobby;	}
	public void setHobby(String hobby) {this.hobby = hobby;	}
}//class END

 

 

 

 

 

 

 

 

 

여기가 중요한 것 같다.

insertProc 에서는 userService.insertUser 를 호출한다.

UserService userService;

 

---------------------------------------------------------------------------------------------------------------------------------

UserService.java

package net.hb.encore;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
	private UserDao userDao;
	
	@Autowired
	public UserService(UserDao userDao) {
		super();
		this.userDao = userDao;
	}
	
	public boolean insertUser(UserDTO user) {
		return userDao.insertUser(user);
	}

	public List<UserDTO> listUser() {
		return userDao.listUser();
	}

	public boolean updatetUser(UserDTO user) {
		return userDao.updateUser(user);
	}

	public boolean deleteUser(String name) {
		return userDao.deleteUser(name);
	}
}//class END

UserService @Service 

 

@Service 는 서비스 레이어, 내부에서 자바 로직을 처리함

 

UserService 는 UserDao 의 객체를 선언하고

UserDao 의 메소드를 반환한다.

 

 

UserDao.java

package net.hb.encore;

import java.util.List;

import org.apache.ibatis.session.SqlSessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class UserDao {
	@Autowired
	private SqlSessionFactory factory;
	
	public boolean insertUser(UserDTO user) {
		int n=factory.openSession().insert("mybatis.user.insertUser", user);
		return (n>0)?true:false;
	}//end

	public List<UserDTO> listUser() {
		return factory.openSession().selectList("mybatis.user.listUser");
	}//end

	public boolean updateUser(UserDTO user) {
		int n=factory.openSession().update("mybatis.user.updateUser", user);
		return (n>0)?true:false;
	}//end

	public boolean deleteUser(String name) {
		int n=factory.openSession().delete("mybatis.user.deleteUser", name);
		return (n>0)?true:false;
	}//end
}//class END

UserDao 는 @Repository 

 @Repository 퍼시스턴스 레이어, DB나 파일같은 외부 I/O 작업을 처리함

 

UserDao 는 직접적으로 안에서 일어나는 일들을 구현하였다.

 

---------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

결국 여기서 호출된 userService.inserUser는 UserDao 에서 정의한 inserUser() 메소드가 호출이 되는 것이다.

	public boolean insertUser(UserDTO user) {
		int n=factory.openSession().insert("mybatis.user.insertUser", user);
		return (n>0)?true:false;
	}//end

 

여기에서 사용하는 factory 는 SqlSessionFactory 의 인스턴스이다.

SqlSessionFactory는 데이터베이스와의 연결과 SQL의 실행에 대한 모든 것을 가진 가장 중요한 객체이다.

	@Autowired
	private SqlSessionFactory factory;

factory.openSession().insert(""); 코드로 인해서 mybatis 에 접근을 할 수 있다.

 

user-mapping.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="mybatis.user">
	<insert id="insertUser" parameterType="user">
		INSERT INTO USER1(NAME,AGE,HOBBY)  
		VALUES(#{name}, #{age}, #{hobby})
	</insert>

	<select id="listUser" resultType="user">
		SELECT * FROM USER1
	</select>
	
	<update id="updateUser" parameterType="user">
		UPDATE USER1  
		SET AGE=#{age}, HOBBY=#{hobby} 	WHERE NAME=#{name}
	</update>
	
	<delete id="deleteUser" parameterType="java.lang.String">
		DELETE FROM USER1 	WHERE NAME=#{name}
	</delete>
</mapper>

 

 

 

user-mapping.xml 에 정의된 insertUser 코드를 실행하게 된다.

mapper 의 namespace 를 mybatis.user라고 정의한 이유는 user 라는 이름을 namespace로 사용하기에는 무리가 있기에 그렇다고 하셨다.

 

아무튼 결국 이 코드로 인해서 insertUser가 실행된다.

name, age, hobby 는 net.hb.encore.UserDTO에 정의 되어있는 속성과 일치 해야 한다!

	<insert id="insertUser" parameterType="user">
		INSERT INTO USER1(NAME,AGE,HOBBY)  
		VALUES(#{name}, #{age}, #{hobby})
	</insert>

 

 

 

이 mybatis가 정의된 xml 문서를 사용하려면 mybatis-config.xml 문서에 아래처럼 매핑을 해주어야 한다

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
	<typeAliases>
		<typeAlias type="net.hb.encore.UserDTO" alias="user"/>
	</typeAliases>
	
	<!-- 쿼리문 -->
	<mappers>
		<mapper resource="user-mapping.xml"/>
	</mappers>
</configuration>

 

 

mybatis-config.xml 문서를 인식하는 역활은 servlet-context.xml 에서 이렇게 정의해주어야 한다.

	<beans:bean id="mybatis" class="org.mybatis.spring.SqlSessionFactoryBean" 
	            p:dataSource-ref="dataSource"
	            p:configLocation="classpath:mybatis-config.xml"
	            p:transactionFactory-ref="transactionFactory"/>

 

다시 돌아와서 !

	<script>
		$(document).ready(function(){
			$('#add').on('click', function(){
		        $.ajax({
		            url: "insertProc.do",
		            type: "POST",
		            data: $('#frm').serialize(),
		            success: function(data){
		                location.href="listUser.do";
		            },
		            error: function(){  alert("신규등록 error");  }
		        });
		    });
		});	
	</script>

성공하면 listUser.do 로 보내질 것이고, 실패 한다면 alert 창이 뜰 것이다.

 

 

ajax 을 사용하려면 pop.xml 에 필수로 기술 할 것!

		<!-- json관련 라이브러리1  -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.6</version>
		</dependency>
		
		<!-- json관련 라이브러리2  -->
		<dependency>
			<groupId>com.fasterxml.jackson.dataformat</groupId>
			<artifactId>jackson-dataformat-xml</artifactId>
			<version>2.9.6</version>
		</dependency>
		
		<!-- Java데이터 JSON타입으로 변환 -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.2</version>
		</dependency>  

✨ 글이 도움이 되었다면 Click ✨


 

728x90
반응형

'개발중 > Spring' 카테고리의 다른 글

JSTL  (0) 2021.01.05
차트 만들기  (0) 2020.11.18
AOP  (0) 2020.10.20
pom.xml 문서 기록  (0) 2020.10.20
mytabis 연동 설정  (0) 2020.10.20