5/27 - ajax, JSON

로그인 검증 예시

$(function(){
  $("#frm").submit(function(e){
    e.preventDefault(); // 기본 제출 막기

    const name = $("#name").val();
    // Ajax 호출 등 비동기 로직 처리
  });
});

preventDefault로 이벤트를 막아주어야 함

구문 결과

e.preventDefault(); O	페이지 새로고침 없이 JS로 처리 가능 (Ajax, 검증 등)
e.preventDefault(); X	브라우저 기본 동작 수행 → 페이지 새로고침/이동 발생

$(function () {
  $("#frm").submit(function (e) {
    e.preventDefault(); // 기본 제출 동작 막기

    const data = $(this).serialize(); // 폼 데이터 직렬화

    $.ajax({
      url: "insert.do",        // 요청 보낼 URL
      type: "POST",            // HTTP 요청 방식 (생략 시 기본은 GET)
      data: data,              // 직렬화된 폼 데이터
      success: function (res) {
        // 서버로부터 받은 응답 처리
        console.log("응답 결과:", res);
        // 예: 성공 메시지 띄우기, 페이지 이동 등
      },
      error: function (xhr, status, error) {
        // 에러 처리
        console.error("에러 발생:", error);
      }
    });
  });
});

Serialize

폼의 입력값을 key=value 형식으로 묶고 &로 이어 붙인 문자열이 나옵니다.
HTML 폼 예시

<form id="frm">
  <input type="text" name="name" value="홍길동">
  <input type="number" name="age" value="30">
</form>

jQuery 코드

let data = $("#frm").serialize();
console.log(data);

출력 결과

name=홍길동&age=30

전체 코드

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
	function fn_process() {
		var _id = $("#t_id").val();
		if (_id == '') {
			alert("ID를 입력하세요");
			return;
		}
		$.ajax({
			type:'get',
			dataType:'text',
			async:true,
			url:'http://localhost:8090/pro16/mem',
			data:{id:_id},
			success : function(data, textStatus) {
				if (data == 'usable') {
					$("#message").text("사용할 수 있는 ID입니다.");
					$("#btn_duplicate").prop("disabled", true);
				} else {
					$("#message").text("사용할 수 없는 ID입니다.");
				}
			}
		})
	}
	/*
	$(function() {
		$("#frm").submit(function(e) {
			e.preventDefault();
			// 아이디를 입력했는지 여부
			if ($("#t_id").val() === '') {
				alert('아이디를 입력해 주세요');
				$("#t_id").focus();
				return;
			}
			
			let data = $("#frm").serialize();
			console.log(data);
			
			$.ajax({
				url : 'insert.do',
				method : 'post',
				data : data,
				success : function(res) {
					// 
				}
			})
			
			// $(this).submit(); Maximum call stack size exceeded (무한반복:이벤트발생->submit)
		})
	})
	*/
	function send() {
		// 아이디를 입력했는지 여부
		if ($("#t_id").val() === '') {
			alert('아이디를 입력해 주세요');
			$("#t_id").focus();
			return false;
		}
		// 중복체크
		let isCon = true;
		$.ajax({
			type:'get',
			dataType:'text',
			async:false,
			url:'http://localhost:8090/pro16/mem',
			data:{id:$("#t_id").val()},
			success : function(data, textStatus) {
				if (data == 'usable') {
					
				} else {
					alert('중복된 아이디입니다.');
					$("#t_id").val('');
					$("#t_id").focus();
					isCon = false;
					return false;
				}
			}
		});
		if (!isCon) return false;
		// 비밀번호 체크
		if ($("#t_pwd").val() === '') {
			alert('비밀번호를 입력해 주세요');
			return false;
		}
	}
	
</script>
</head>
<body>
<form id="frm" method="post" action="insert.do" onsubmit="return send();">
아이디 : <input type="text" id="t_id" name="t_id">
<input type="button" id="btn_duplicate" value="ID 중복체크하기" onclick="fn_process()"><br><br>
<div id="message"></div>
비밀번호 : <input type="password" id="t_pwd" name="t_pwd"> <br>
<input type="submit" value="가입">
</form>
</body>
</html>

form 데이터 전송하는 법
- submit (actoin으로 전송)
- ajax의 경우
  - data : {name : value, name : value …}
  - data : $(폼).serialize();
- ajax 전송인데, 파일도 전송
- let f = new Form($(폼)[0]);

JSON

data : {jsonInfo: JSON.stringify({name : '박지성', age : '25})}

따옴표가 들어있으면 JSON
따옴표 없으면 JavaScript
stringify는 자동으로 따옴표를 넣어 JSON 객체로 바꿔줌 (자바 스크립트 → JSON)
JSON.parse() : 문자열 → 자바스크립트 객체

한 줄 정의
- 사람도 읽기 쉽고, 컴퓨터도 처리하기 쉬운 데이터 형식입니다.
생김새 예시 (JSON 구조)

{
  "name": "홍길동",
  "age": 30,
  "isMarried": false,
  "hobbies": ["독서", "등산"],
  "address": {
    "city": "서울",
    "zip": "12345"
  }
}

구성 요소
- 중괄호 {}: 객체(object)
- 대괄호 []: 배열(array)
- 쌍따옴표 " ": 키와 문자열 값은 반드시 감싸야 함
- 기본 자료형 지원: 문자열, 숫자, 불리언, null, 배열, 객체

웹 애플리케이션 모델

모델 1 방식
- JSP, Servlet 에서 썼던 방식
- 브라우저 ↔ 화면 기능 , 로직 처리 ↔ 데이터베이스
모델 2 방식
- 웹 애플리케이션의 각 기능을 분리해서 구현
- 모듈화해서 개발
- 화면, 요청, 비즈니스로직 분리
- MVC 디자인 패턴

MVC 디자인 패턴

Model - View - Controller 방식

Controller
- 서블릿이 컨트롤러의 역할
- 클라이언트의 요청 분석
- 요청에 대해 필요한 모델
- Medel에서 처리한 결과를 보여주기 위해 JSP로 전송
Model
- 데이터베이스 연동과 같은 비즈니스 로직
- 일반적으로 DAO, VO
View
- JSP가 화면 담당
- Model에서 처리한 결과 화면에 표시

Controller

package member;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 모든 멤버 경로 뒤에 무언가 있으면 여기로 들어옴
@WebServlet("/member/*")
public class MemberController extends HttpServlet{
	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse res) {
		doHandle(req, res);
	}
	
	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse res) {
		doHandle(req, res);
	}
	
	public void doHandle(HttpServletRequest req, HttpServletResponse res) {
		System.out.println(req.getRequestURI());
	}
}

실행 결과

/pro17/member/index.do

회원 등록 예제

package member;

import java.io.IOException;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 모든 멤버 경로 뒤에 무언가 있으면 여기로 들어옴
@WebServlet("/member/*")
public class MemberController extends HttpServlet {

	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		doHandle(req, res);
	}

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		doHandle(req, res);
	}

	public void doHandle(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println(req.getRequestURI());
		String page = "";
		String cmd = req.getRequestURI().substring(req.getContextPath().length());
		System.out.println(cmd);

		
		if ("/member/index.do".equals(cmd)) {
			MemberDAO dao = new MemberDAO();
			List<MemberVO> list = dao.listMembers();
			req.setAttribute("list", list);
			page = "memberList";

		} else if ("/member/writeForm.do".equals(cmd)) { // 등록 처리
			page = "writeForm";
		} else if ("/member/insert.do".equals(cmd)) {
			MemberVO vo = new MemberVO();
			vo.setId(req.getParameter("id"));
			vo.setPwd(req.getParameter("pwd"));
			vo.setName(req.getParameter("name"));
			vo.setEmail(req.getParameter("email"));
			vo.setJoindate(new Date());
			MemberDAO dao = new MemberDAO();
			dao.addMember(vo);
			
			req.setAttribute("msg", "등록");
			req.setAttribute("url", "index.do");
			page="alert";
		} else if ("/member/updateForm.do".equals(cmd)) { // 수정 폼
			
		} else if ("/member/update.do".equals(cmd)) { // 수정 처리

		} else if ("/member/delete.do".equals(cmd)) { // 삭제 처리

		} else {
			System.out.println("에러" + page);
		}

			req.getRequestDispatcher("/WEB-INF/view/" + page + ".jsp").forward(req, res);
		
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1">
		<tr align="center" bgcolor="lightgreen">
			<td>아이디</td>
			<td>비밀번호</td>
			<td>이름</td>
			<td>이메일</td>
			<td>생성일</td>
		</tr>
		<c:forEach var="m" items="${list}">
			<tr>
				<td>${m.id}</td>
				<td>${m.pwd}</td>
				<td>${m.name}</td>
				<td>${m.email}</td>
				<td>${m.joindate}</td>
			</tr>
		</c:forEach>
	</table>

	<h1>회원등록</h1>
	<form action="insert.do" method="post">
		<table>
			<tr>
				<th>아이디</th>
				<td><input type="text" id="id" name="id"></td>
			</tr>

			<tr>
				<th>이름</th>
				<td><input type="text" id="name" name="name"></td>
			</tr>

			<tr>
				<th>이메일</th>
				<td><input type="text" id="email" name="email"></td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center"><input type="submit"
					value="등록" onclick="location.href='writeForm.do'">
			</tr>
		</table>
	</form>
</body>
</html>

<%@ 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>
</head>
<script>
	alert('${msg}');
	location.href = '${url}';
</script>
<body>
	
</body>
</html>

메모

시작 - 사용자가 요청
파라미터 전달 - 파일
요청받는 방법 - web.xml, 어노테이션
파라미터 받기 - 파일 저장
비즈니스 로직 - Service는 로직 처리, DAO는 DB연동
처리 결과를 request에 저장
포워딩 (하나의 요청)
JSP : request에 저장된 처리결과를 꺼내서 출력
끝 - 출력결과를 응답 (브라우저로)
한글이 깨지는 경우 web 인코더 필터 넣기
jdk11 설치
환경변수 jdk11로 변경
workspace_sts 압축해제
sts_3.9.8… 압축 풀기
sts실행
package explorer - server, test 삭제
Servers - Tomcat … 삭제
Tomcat 추가
Spring Legacy 프로젝트 생성

톰캣은 9.0 서버런타임인바이런먼트 컨피규어 저에꺼가 사라졌으면 새로 추가하거나 컨피규어 가서 없으면 지우고 추가

kr.co.test

728x90

'BackEnd' 카테고리의 다른 글

5/29 - MVC (0)	2025.06.01
5/28 - Spring (0)	2025.06.01
5/26 - JSTL (0)	2025.06.01
5/23 - 서블릿, 쿠키와 세션, 필터와 리스너, JSP (0)	2025.06.01
5/22 - Servlet, 쿠키, 세션 (0)	2025.06.01

지원 공부방

5/27 - ajax, JSON

Serialize

JSON

웹 애플리케이션 모델

MVC 디자인 패턴

Controller

회원 등록 예제

메모

'BackEnd' 카테고리의 다른 글

티스토리툴바

5/27 - ajax, JSON

Serialize

JSON

웹 애플리케이션 모델

MVC 디자인 패턴

Controller

회원 등록 예제

메모

'BackEnd' 카테고리의 다른 글

관련글

티스토리툴바