Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

231004_AJAX 강의 본문

대덕인재개발원/대덕인재개발원_Front End

231004_AJAX 강의

Unlimited00 2023. 10. 2. 09:01

[join.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="Ajax06" />
        <meta name="keywords" content="대덕인재개발원, html, Ajax06" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>Ajax06</title>
		<link href="../css/style07.css" rel="stylesheet" />
        <script src="../js/jquery-3.7.1.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <style>
        	input[type=button] {
        		margin: 5px;
        		border-radius: 30px;
        	}
        </style>
        <script>
            
            $(function(){
                
                $("#idChkBtn").on("click", function(){
                	// 입력한 값 가져오기
                	var idVal = $("#id").val().trim();
                	console.log(idVal);
                	// 값의 형식 비교
                	var idreg = /^[a-z][a-zA-Z0-9]{3,7}$/;
                	if(!(idreg.test(idVal))) {
                		alert("id 형식 오류입니다...");
                		return false;
                	}
                	// 서버로 전송
                	$.ajax({
                		url : "<%= request.getContextPath() %>/idCheck.do",
                		data : { "id" : idVal },
                		type : "get",
                		success : function(res){
                			
                		},
                		error : function(xhr){
                			alert("상태 : " + xhr.status);
                		},
                		dataType : "json"
                	});
                });
                
            });
            
        </script>
	</head>
	<body>
	<!-- 
		-- public String idDuplChk(String id)
		select mem_id from member where mem_id = 'a001';
		
		-- public List<ZipVO> selectByDong(String dong)
		select * from ziptb where dong like '탄방%';
		
		-- public int insertMember(MemberVO memVo);
		INSERT INTO member (
		    mem_id,
		    mem_pass,
		    mem_name,
		    mem_bir,
		    mem_zip,
		    mem_add1,
		    mem_add2,
		    mem_hp,
		    mem_mail
		) VALUES (
		    'xyz001',
		    '1234567',
		    '고릴라',
		    '1999-08-12',
		    '135-932',
		    '대전 서구 둔산동',
		    '222-2번지 대전경찰서 1층 원무과',
		    '010-1234-5678',
		    'kkk1234@ddit.or.kr'
		);
		
		commit;
	 -->
	<div class="container mt-3">
		<h2>회원가입</h2>
		<form>
			<div class="mb-3 mt-3 col-sm-3">
				<label for="id">아이디</label> 
				<input id="idChkBtn" type="button" class="btn btn-outline-success btn-sm" value="중복검사" />
				<span id="idChkTxt"></span>
				<input type="text" class="form-control" id="id" name="mem_id">
			</div>
			<div class="mb-3 col-sm-3">
				<label for="name">이름</label> 
				<input type="text" class="form-control" id="name" name="mem_name">
			</div>
			<div class="mb-3 col-sm-3">
				<label for="name">생년월일</label> 
				<input type="date" class="form-control" id="birth" name="mem_bir">
			</div>
			<div class="mb-3 col-sm-3">
				<label for="pass">비밀번호</label> 
				<input type="password" class="form-control" id="pass" name="mem_pass">
			</div>
			<div class="mb-3 col-sm-3">
				<label for="hp">전화번호</label> 
				<input type="text" class="form-control" id="hp" name="mem_hp">
			</div>
			<div class="mb-3 col-sm-3">
		        <label for="email">이메일</label>
		        <input type="email" class="form-control" id="email" name="mem_mail">
		    </div>
		    <div class="mb-3 col-sm-3">
				<label for="zip">우편번호</label> 
				<input id="zipBtn" type="button" class="btn btn-outline-info btn-sm" value="번호검색" />
				<input type="text" class="form-control" id="zip" name="mem_zip">
			</div>
		    <div class="mb-3 col-sm-6">
				<label for="add1">주소</label> 
				<input type="text" class="form-control" id="add1" name="mem_add1">
			</div>
		    <div class="mb-3 col-sm-6">
				<label for="add2">상세주소</label> 
				<input type="text" class="form-control" id="add2" name="mem_add2">
			</div>
			<button type="submit" class="btn btn-primary btn-lg">제출</button>
			<button type="submit" class="btn btn-secondary btn-lg">초기화</button>
		</form>
	</div>
</body>
</html>

- http://localhost/memberpro/member/join.jsp

-- public String idDuplChk(String id)
select mem_id from member where mem_id = 'a001';

-- public List<ZipVO> selectByDong(String dong)
select * from ziptb where dong like '탄방%';

-- public int insertMember(MemberVO memVo);
INSERT INTO member (
    mem_id,
    mem_pass,
    mem_name,
    mem_bir,
    mem_zip,
    mem_add1,
    mem_add2,
    mem_hp,
    mem_mail
) VALUES (
    'xyz001',
    '1234567',
    '고릴라',
    '1999-08-12',
    '135-932',
    '대전 서구 둔산동',
    '222-2번지 대전경찰서 1층 원무과',
    '010-1234-5678',
    'kkk1234@ddit.or.kr'
);

commit;

[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>
	<properties resource="kr/or/ddit/mybatis/config/dbinfo.properties" />
	
	<settings>
		<setting name="jdbcTypeForNull" value="NULL" />
	</settings>
	
	<typeAliases>
		<typeAlias type="kr.or.ddit.member.vo.MemberVO" alias="memberVo" />
		<typeAlias type="kr.or.ddit.member.vo.ZipVO" alias="zipVo" />
	</typeAliases>
	
	<!-- DB연결 설정 -->
	<environments default="oracleDev">
		<environment id="oracleDev">
			<!-- 오라클 -->
			<transactionManager type="JDBC" />
			<dataSource type="POOLED">
				<property name="driver" value="${driver}" />
				<property name="url" value="${url}" />
				<property name="username" value="${user}" />
				<property name="password" value="${pass}" />
			</dataSource>
		</environment>
		<!-- <environment id="m1">
			MySql
		</environment> -->
	</environments>
	
	<mappers>
		<mapper resource="kr/or/ddit/mybatis/mapper/member.xml" />
	</mappers>
</configuration>

[ZipVO.java]

package kr.or.ddit.member.vo;

public class ZipVO {

	private String zipcode;
	private String sido;
	private String gugun;
	private String dong;
	private String ri;
	private String bldg;
	private String bunji;
	private int seq;
	
	public ZipVO() {}
	public ZipVO(String zipcode, String sido, String gugun, String dong, String ri, String bldg, String bunji,
			int seq) {
		this.zipcode = zipcode;
		this.sido = sido;
		this.gugun = gugun;
		this.dong = dong;
		this.ri = ri;
		this.bldg = bldg;
		this.bunji = bunji;
		this.seq = seq;
	}
	
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getSido() {
		return sido;
	}
	public void setSido(String sido) {
		this.sido = sido;
	}
	public String getGugun() {
		return gugun;
	}
	public void setGugun(String gugun) {
		this.gugun = gugun;
	}
	public String getDong() {
		return dong;
	}
	public void setDong(String dong) {
		this.dong = dong;
	}
	public String getRi() {
		return ri;
	}
	public void setRi(String ri) {
		this.ri = ri;
	}
	public String getBldg() {
		return bldg;
	}
	public void setBldg(String bldg) {
		this.bldg = bldg;
	}
	public String getBunji() {
		return bunji;
	}
	public void setBunji(String bunji) {
		this.bunji = bunji;
	}
	public int getSeq() {
		return seq;
	}
	public void setSeq(int seq) {
		this.seq = seq;
	}
	
	@Override
	public String toString() {
		return "ZipVO [zipcode=" + zipcode + ", sido=" + sido + ", gugun=" + gugun + ", dong=" + dong + ", ri=" + ri
				+ ", bldg=" + bldg + ", bunji=" + bunji + ", seq=" + seq + "]";
	}
	
}

[MemberVO.java]

package kr.or.ddit.member.vo;

public class MemberVO {

	private String mem_id;
	private String mem_pass;
	private String mem_name;
	private String mem_regno1;
	private String mem_regno2;
	private String mem_bir;
	private String mem_zip;
	private String mem_add1;
	private String mem_add2;
	private String mem_hometel;
	private String mem_comtel;
	private String mem_hp;
	private String mem_mail;
	private String mem_job;
	private String mem_like;
	private String mem_memorial;
	private String mem_memorialday;
	private int mem_mileage;
	private String mem_delete;
	
	public MemberVO() {}
	public MemberVO(String mem_id, String mem_pass, String mem_name, String mem_regno1, String mem_regno2,
			String mem_bir, String mem_zip, String mem_add1, String mem_add2, String mem_hometel, String mem_comtel,
			String mem_hp, String mem_mail, String mem_job, String mem_like, String mem_memorial,
			String mem_memorialday, int mem_mileage, String mem_delete) {
		this.mem_id = mem_id;
		this.mem_pass = mem_pass;
		this.mem_name = mem_name;
		this.mem_regno1 = mem_regno1;
		this.mem_regno2 = mem_regno2;
		this.mem_bir = mem_bir;
		this.mem_zip = mem_zip;
		this.mem_add1 = mem_add1;
		this.mem_add2 = mem_add2;
		this.mem_hometel = mem_hometel;
		this.mem_comtel = mem_comtel;
		this.mem_hp = mem_hp;
		this.mem_mail = mem_mail;
		this.mem_job = mem_job;
		this.mem_like = mem_like;
		this.mem_memorial = mem_memorial;
		this.mem_memorialday = mem_memorialday;
		this.mem_mileage = mem_mileage;
		this.mem_delete = mem_delete;
	}

	public String getMem_id() {
		return mem_id;
	}

	public void setMem_id(String mem_id) {
		this.mem_id = mem_id;
	}

	public String getMem_pass() {
		return mem_pass;
	}

	public void setMem_pass(String mem_pass) {
		this.mem_pass = mem_pass;
	}

	public String getMem_name() {
		return mem_name;
	}

	public void setMem_name(String mem_name) {
		this.mem_name = mem_name;
	}

	public String getMem_regno1() {
		return mem_regno1;
	}

	public void setMem_regno1(String mem_regno1) {
		this.mem_regno1 = mem_regno1;
	}

	public String getMem_regno2() {
		return mem_regno2;
	}

	public void setMem_regno2(String mem_regno2) {
		this.mem_regno2 = mem_regno2;
	}

	public String getMem_bir() {
		return mem_bir;
	}

	public void setMem_bir(String mem_bir) {
		this.mem_bir = mem_bir;
	}

	public String getMem_zip() {
		return mem_zip;
	}

	public void setMem_zip(String mem_zip) {
		this.mem_zip = mem_zip;
	}

	public String getMem_add1() {
		return mem_add1;
	}

	public void setMem_add1(String mem_add1) {
		this.mem_add1 = mem_add1;
	}

	public String getMem_add2() {
		return mem_add2;
	}

	public void setMem_add2(String mem_add2) {
		this.mem_add2 = mem_add2;
	}

	public String getMem_hometel() {
		return mem_hometel;
	}

	public void setMem_hometel(String mem_hometel) {
		this.mem_hometel = mem_hometel;
	}

	public String getMem_comtel() {
		return mem_comtel;
	}

	public void setMem_comtel(String mem_comtel) {
		this.mem_comtel = mem_comtel;
	}

	public String getMem_hp() {
		return mem_hp;
	}

	public void setMem_hp(String mem_hp) {
		this.mem_hp = mem_hp;
	}

	public String getMem_mail() {
		return mem_mail;
	}

	public void setMem_mail(String mem_mail) {
		this.mem_mail = mem_mail;
	}

	public String getMem_job() {
		return mem_job;
	}

	public void setMem_job(String mem_job) {
		this.mem_job = mem_job;
	}

	public String getMem_like() {
		return mem_like;
	}

	public void setMem_like(String mem_like) {
		this.mem_like = mem_like;
	}

	public String getMem_memorial() {
		return mem_memorial;
	}

	public void setMem_memorial(String mem_memorial) {
		this.mem_memorial = mem_memorial;
	}

	public String getMem_memorialday() {
		return mem_memorialday;
	}

	public void setMem_memorialday(String mem_memorialday) {
		this.mem_memorialday = mem_memorialday;
	}

	public int getMem_mileage() {
		return mem_mileage;
	}

	public void setMem_mileage(int mem_mileage) {
		this.mem_mileage = mem_mileage;
	}

	public String getMem_delete() {
		return mem_delete;
	}

	public void setMem_delete(String mem_delete) {
		this.mem_delete = mem_delete;
	}

	@Override
	public String toString() {
		return "MemberVO [mem_id=" + mem_id + ", mem_pass=" + mem_pass + ", mem_name=" + mem_name + ", mem_regno1="
				+ mem_regno1 + ", mem_regno2=" + mem_regno2 + ", mem_bir=" + mem_bir + ", mem_zip=" + mem_zip
				+ ", mem_add1=" + mem_add1 + ", mem_add2=" + mem_add2 + ", mem_hometel=" + mem_hometel + ", mem_comtel="
				+ mem_comtel + ", mem_hp=" + mem_hp + ", mem_mail=" + mem_mail + ", mem_job=" + mem_job + ", mem_like="
				+ mem_like + ", mem_memorial=" + mem_memorial + ", mem_memorialday=" + mem_memorialday
				+ ", mem_mileage=" + mem_mileage + ", mem_delete=" + mem_delete + "]";
	}
	
}

[member.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="member">
	
	<select id="selectMember" resultType="memberVo">
		select * from member
	</select>
	
	<select id="searchByIdPass" parameterType="map" resultType="memberVo">
		select * from member where mem_id = #{id} and mem_pass = #{pass}
	</select>
	
	<!-- 아이디 중복 검사 -->
	<select id="idDuplChk" parameterType="String" resultType="String">
		select mem_id from member where mem_id = #{mem_id}
	</select>
	
	<!-- 우편번호 검색 -->
	<select id="selectByDong" parameterType="String" resultType="zipVo">
		select * from ziptb where dong like #{dong} || '%'
	</select>
	
	<!-- 회원가입 - 저장 -->
	<insert id="insertMember" parameterType="memberVo">
		INSERT INTO member (
		    mem_id,
		    mem_pass,
		    mem_name,
		    mem_bir,
		    mem_zip,
		    mem_add1,
		    mem_add2,
		    mem_hp,
		    mem_mail
		) VALUES (
		    #{mem_id},
		    #{mem_pass},
		    #{mem_name},
		    #{mem_bir},
		    #{mem_zip},
		    #{mem_add1},
		    #{mem_add2},
		    #{mem_hp},
		    #{mem_mail}
		)
	</insert>
	
</mapper>

[IMemberDAO.java]

package kr.or.ddit.member.dao;

import java.util.List;
import java.util.Map;

import kr.or.ddit.member.vo.MemberVO;
import kr.or.ddit.member.vo.ZipVO;

public interface IMemberDAO {

	// 추상 메서드 선언
	
	// 전체 리스트 가져오기
	public List<MemberVO> selectMember();
	
	// id, pass 검색 데이터 가져오기
	public MemberVO searchByIdPass(Map<String, Object> map);
	
	// 아이디 중복 검사
	public String idDuplChk(String id);
	
	// 우편번호 검색
	public List<ZipVO> selectByDong(String dong);
	
	// 회원가입 - 저장
	public int insertMember(MemberVO memVo);
	
}

[IMemberService.java]

package kr.or.ddit.member.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.member.vo.MemberVO;
import kr.or.ddit.member.vo.ZipVO;

public interface IMemberService {

	// 추상 메서드 선언
	
	// 전체 리스트 가져오기
	public List<MemberVO> selectMember();
	
	// id, pass 검색 데이터 가져오기
	public MemberVO searchByIdPass(Map<String, Object> map);
	
	// 아이디 중복 검사
	public String idDuplChk(String id);
	
	// 우편번호 검색
	public List<ZipVO> selectByDong(String dong);
	
	// 회원가입 - 저장
	public int insertMember(MemberVO memVo);
	
}

[MemberDaoImpl.java]

package kr.or.ddit.member.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.session.SqlSession;

import kr.or.ddit.member.vo.MemberVO;
import kr.or.ddit.member.vo.ZipVO;
import kr.or.ddit.mybatis.config.MyBatisUtil;

/*
 * Data Access Object
 * SqlSession객체가 필요.
 * Singleton을 통해 자신의 객체를 생성해서 return하는 메소드 필요(getDaoInstance()).
 */
public class MemberDaoImpl implements IMemberDAO {

	// 싱글톤 패턴
	private static MemberDaoImpl dao;
	private MemberDaoImpl() {}
	public static MemberDaoImpl getInstance() {
		if(dao == null) dao = new MemberDaoImpl();
		return dao;
	}
	
	@Override
	public List<MemberVO> selectMember() {
		SqlSession session = null;
		List<MemberVO> memberList = null;
		
		try {
			session = MyBatisUtil.getSqlSession();
			memberList = session.selectList("member.selectMember");
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if(session != null) session.close();
		}
		
		return memberList;
	}

	@Override
	public MemberVO searchByIdPass(Map<String, Object> map) {
		SqlSession session = null;
		MemberVO memVo = null;
		
		try {
			session = MyBatisUtil.getSqlSession();
			memVo = session.selectOne("member.searchByIdPass", map);
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if(session != null) session.close();
		}
		
		return memVo;
	}
	
	@Override
	public String idDuplChk(String id) {
		SqlSession session = null;
		String dupId = null;
		
		try {
			session = MyBatisUtil.getSqlSession();
			dupId = session.selectOne("member.idDuplChk", id);
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if(session != null) session.close();
		}
		
		return dupId;
	}
	
	@Override
	public List<ZipVO> selectByDong(String dong) {
		SqlSession session = null;
		List<ZipVO> zipList = null;
		
		try {
			session = MyBatisUtil.getSqlSession();
			zipList = session.selectList("member.selectByDong", dong);
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if(session != null) session.close();
		}
		
		return zipList;
	}
	
	@Override
	public int insertMember(MemberVO memVo) {
		SqlSession session = null;
		int cnt = 0;
		
		try {
			session = MyBatisUtil.getSqlSession();
			cnt = session.insert("member.insertMember", memVo);
			if(cnt > 0) session.commit();
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if(session != null) session.close();
		}
		
		return cnt;
	}

}

[MemberServiceImpl.java]

package kr.or.ddit.member.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.member.dao.IMemberDAO;
import kr.or.ddit.member.dao.MemberDaoImpl;
import kr.or.ddit.member.vo.MemberVO;
import kr.or.ddit.member.vo.ZipVO;

/*
 * DAO 객체가 필요
 * 싱글톤을 위한 자기 자신의 객체를 생성해서 리턴하는 메소드
 */
public class MemberServiceImpl implements IMemberService {

	private IMemberDAO dao;
	
	// 싱글톤 패턴
	private static MemberServiceImpl service;
	private MemberServiceImpl() {
		dao = MemberDaoImpl.getInstance();
	}
	public static MemberServiceImpl getInstance() {
		if(service == null) service = new MemberServiceImpl();
		return service;
	}
	
	@Override
	public List<MemberVO> selectMember() {
		return dao.selectMember();
	}

	@Override
	public MemberVO searchByIdPass(Map<String, Object> map) {
		return dao.searchByIdPass(map);
	}
	
	@Override
	public String idDuplChk(String id) {
		return dao.idDuplChk(id);
	}
	
	@Override
	public List<ZipVO> selectByDong(String dong) {
		return dao.selectByDong(dong);
	}
	
	@Override
	public int insertMember(MemberVO memVo) {
		return dao.insertMember(memVo);
	}

}

[IdCheck.java]

package kr.or.ddit.member.controller;

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

import kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;


@WebServlet("/idCheck.do")
public class IdCheck extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		// 전송 데이터 받기
		String userId = request.getParameter("id"); // json의 data {"id" : idVal} 값을 가져온다.
		//System.out.println(userId);
		// service 객체
		IMemberService service = MemberServiceImpl.getInstance();
		// 메소드 실행
		String dupId = service.idDuplChk(userId);
		
		request.setAttribute("dupId", dupId);
		request.getRequestDispatcher("/view/idDuplCheck.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

[idDuplCheck.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	String res = (String) request.getAttribute("dupId");
	
	if(res == null) { // id 사용가능
%>

		{
			"flag" : "ID 사용가능",
			"id" : "<%= res %>"
		}

<%	
	}else { // id 사용불가능
%>

		{
			"flag" : "ID 사용불가능",
			"id" : "<%= res %>"
		}

<%	
	}
%>

[join.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="Ajax06" />
        <meta name="keywords" content="대덕인재개발원, html, Ajax06" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>Ajax06</title>
		<link href="../css/style07.css" rel="stylesheet" />
        <script src="../js/jquery-3.7.1.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <style>
        	input[type=button] {
        		margin: 5px;
        		border-radius: 30px;
        	}
        </style>
        <script>
            
            $(function(){
                
                $("#idChkBtn").on("click", function(){
                	// 입력한 값 가져오기
                	var idVal = $("#id").val().trim();
                	//console.log(idVal);
                	// 값의 형식 비교
                	var idreg = /^[a-z][a-zA-Z0-9]{3,7}$/;
                	if(!(idreg.test(idVal))) {
                		alert("id 형식 오류입니다...");
                		return false;
                	}
                	// 서버로 전송
                	$.ajax({
                		url : "<%= request.getContextPath() %>/idCheck.do",
                		data : { "id" : idVal },
                		type : "get",
                		success : function(res){
                			//console.log(res);
                			$("#idChkTxt").html(res.flag).css("color", "red");
                		},
                		error : function(xhr){
                			alert("상태 : " + xhr.status);
                		},
                		dataType : "json"
                	});
                });
                
            });
            
        </script>
	</head>
	<body>
	<!-- 
		-- public String idDuplChk(String id)
		select mem_id from member where mem_id = 'a001';
		
		-- public List<ZipVO> selectByDong(String dong)
		select * from ziptb where dong like '탄방%';
		
		-- public int insertMember(MemberVO memVo);
		INSERT INTO member (
		    mem_id,
		    mem_pass,
		    mem_name,
		    mem_bir,
		    mem_zip,
		    mem_add1,
		    mem_add2,
		    mem_hp,
		    mem_mail
		) VALUES (
		    'xyz001',
		    '1234567',
		    '고릴라',
		    '1999-08-12',
		    '135-932',
		    '대전 서구 둔산동',
		    '222-2번지 대전경찰서 1층 원무과',
		    '010-1234-5678',
		    'kkk1234@ddit.or.kr'
		);
		
		commit;
	 -->
	<div class="container mt-3">
		<h2>회원가입</h2>
		<form>
			<div class="mb-3 mt-3 col-sm-4">
				<label for="id">아이디</label> 
				<input id="idChkBtn" type="button" class="btn btn-outline-success btn-sm" value="중복검사" />
				<span id="idChkTxt"></span>
				<input type="text" class="form-control" id="id" name="mem_id">
			</div>
			<div class="mb-3 col-sm-4">
				<label for="name">이름</label> 
				<input type="text" class="form-control" id="name" name="mem_name">
			</div>
			<div class="mb-3 col-sm-4">
				<label for="name">생년월일</label> 
				<input type="date" class="form-control" id="birth" name="mem_bir">
			</div>
			<div class="mb-3 col-sm-4">
				<label for="pass">비밀번호</label> 
				<input type="password" class="form-control" id="pass" name="mem_pass">
			</div>
			<div class="mb-3 col-sm-4">
				<label for="hp">전화번호</label> 
				<input type="text" class="form-control" id="hp" name="mem_hp">
			</div>
			<div class="mb-3 col-sm-4">
		        <label for="email">이메일</label>
		        <input type="email" class="form-control" id="email" name="mem_mail">
		    </div>
		    <div class="mb-3 col-sm-4">
				<label for="zip">우편번호</label> 
				<input id="zipBtn" type="button" class="btn btn-outline-info btn-sm" value="번호검색" />
				<input type="text" class="form-control" id="zip" name="mem_zip">
			</div>
		    <div class="mb-3 col-sm-6">
				<label for="add1">주소</label> 
				<input type="text" class="form-control" id="add1" name="mem_add1">
			</div>
		    <div class="mb-3 col-sm-6">
				<label for="add2">상세주소</label> 
				<input type="text" class="form-control" id="add2" name="mem_add2">
			</div>
			<button type="submit" class="btn btn-primary btn-lg">제출</button>
			<button type="submit" class="btn btn-secondary btn-lg">초기화</button>
		</form>
	</div>
</body>
</html>

- http://localhost/memberpro/member/join.jsp

'대덕인재개발원 > 대덕인재개발원_Front End' 카테고리의 다른 글

231006_AJAX 강의  (0) 2023.10.06
231005_AJAX 강의  (0) 2023.10.05
230927_AJAX 강의  (0) 2023.09.27
230926_AJAX 강의  (0) 2023.09.26
230925_AJAX 강의  (0) 2023.09.25
'대덕인재개발원/대덕인재개발원_Front End' Related Articles more