반응형
- D04_session_API
- 02_이메일
- sample_email.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
1. JS 임포트
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
2. public key 셋팅
// public key
emailjs.init("32wB1PEMtyGXWyRDR");
3. 보낼 데이터 셋팅
let data = {
//각 요소는 emailJS에서 설정한 템플릿과 동일한 명으로 작성!
from_name: '관리자',
to_name: document.querySelector("#to_name").value ,
email_id : document.querySelector("#email").value ,
message : document.querySelector("#message").value ,
};
4. 이메일 보내기
-----------------------------------------------------------
emailjs.send(1번, 2번, 3번)
1번) service ID
2번) template ID
3번) 보낼 내용이 담긴 객체
-----------------------------------------------------------
emailjs.send('service_azcdsnr', 'template_nq43gvo', data).then(function(response) {
console.log('SUCCESS!', response.status, response.text);
alert("메일을 성공적으로 전송하였습니다.");
}, function(error) {
console.log('FAILED...', error);
});
-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
</head>
<body>
<div align="center">
<table border="1">
<tr>
<td colspan="2"><h1>회원에게 이메일 보내기</h1></td>
</tr>
<tr>
<td colspan="2"><h3>Gmail로만 전송 가능합니다.</h3></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" id="to_name" placeholder="이름을 입력해주세요"></td>
</tr>
<tr>
<td>이메일 주소</td>
<td><input type="text" id="email" , placeholder="메일주소를 입력해주세요"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea id="message" rows="5" placeholder="내용을 입력해주세요 "></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="button-submitEmail" value="메일보내기"/></td>
</tr>
</table>
</div>
<script>
function submitEmail(){
let data = {
//각 요소는 emailJS에서 설정한 템플릿과 동일한 명으로 작성!
from_name: '관리자',
name: document.querySelector("#to_name").value ,
email_id : document.querySelector("#email").value ,
message : document.querySelector("#message").value ,
};
//emailjs.send('service ID', 'template ID', 보낼 내용이 담긴 객체)
emailjs.send('service_6gsbz4m', 'template_0q0exuq', data).then(function(response) {
console.log('SUCCESS!', response.status, response.text);
alert("메일을 성공적으로 전송하였습니다.");
}, function(error) {
console.log('FAILED...', error);
});
}
// public key
emailjs.init("VVgBWW57OZv5FHmvU");
//console.log(a);
let $submitEmail = document.querySelector("#button-submitEmail");
$submitEmail.addEventListener("click", submitEmail);
</script>
</body>
</html>반응형
'코딩 > 4-JSP & SERVLET' 카테고리의 다른 글
| 이클립스 스프링 다운로드 (0) | 2025.07.11 |
|---|---|
| D04_session_API => 01_통계 (3) | 2025.07.09 |
| D03_session_upload (3) | 2025.07.07 |
| D02_session_async (0) | 2025.07.07 |
| C22_dao_board_re (0) | 2025.07.03 |