JQuery 사용 - JQuery.com > JQuery CDN > 3.x 버전 스니펫 붙여넣기
https://developers.google.com/speed/libraries?hl=ko#jquery
.innerHTML : HTML tag안의 내용을 읽어옴
.innerText : text 글자 자체를 읽어옴
ex) 이모지 코드를 작성하여 표현하는 경우
innerHTML : 태그안의 내용을 읽어옴 (이모지 출력)
innerText : 텍스트 자체를 읽어옴 (이모지 코드 문자 자체가 출력)
document. ~ : 문서 자체를 가리킴
$(document. ~) : DOM 객체 형태로 메모리에 올라가 있는 문서를 가리킴
(body 태그 안의 모든 코드를 읽은 후의 문서를 참조한다는 뜻)
$(document).on('click', '#newBtn', function(){ ~~ });
>> 메모리에 올라가 있는 문서에서 #newBtn 부분을 찾아내어 code reload
$(document).ready(function(){
>> /html 을 만났을 때(body태그를 모두 읽었을 때)
작성한 함수의 내용이 실행 되도록 함
JQuery 사용하여 회원가입 폼 작성 + 유효성 검사
JQuery 사용하여 대분류 - 중분류 - 소분류 검색ex07.html (innerHTML & innerText &
<!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>
</head>
<body>
<div id="one">one next...</div>
<script>
//alert(document.querySelector('#one').innerHTML);
// 빈창에 <div>태그 안의 내용을 alert로 보여주는 이벤트
// 회원가입, 등록 기능을 수행했을 때 완료되었습니다.
// 메시지를 출력하는 기능으로 사용 가능할듯
// JQuery Code
$('#one');
// $(document.querySelector('#one'));
alert($('#one').text());
$('#one').text('수정...');
</script>
<button id="btn" type="button">button</button>
<div id="output"></div>
<script>
$('#btn').click(function(){ // id="btn"에 대한 버튼 기능
// button을 눌렀을 때 새로운 sub button이 생성되는 기능
$('#output').html('<button type="button" id="newBtn">sub button</button>');
});
// 소스코드가 버튼 생성도 전에 실행되어서 sub button이 생겨도 작동하지 않음
// 소스코드 실행시 코드가 DOM 공간의 메모리에 저장되고 그것을 html.file에 렌더링하여 보여주는 구조인데
// 그 DOM 공간에 있는 #newBtn의 코드만 reload시켜
// 버튼 생성 전에 버튼 클릭 코드가 실행되어 눌렀을 때 작동하지 않는것을 해결하기 위해
// 생성 후에 다시 해당 코드부분만 reload 시켜 버튼 생성 후에 클릭시의 이벤트 코드가 작동되도록 함
// $('#newBtn').click(function(){ // 이 상태로 실행하면 파일에 #newBtn이 존재하지 않음
// 현재 메모리 상에 올라와 있는(동적으로 변경된) $(document)에서 #newBtn을 참조하여 code reload
$(document).on('click', '#newBtn', function(){ // #newBtn 부분에 접근하여 reload 하기위한 코드
alert('new button click');
});
</script>
</body>
</html>ex08.html
<!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>
// body 태그 시작도 전에 작성된 코드이므로 현재 값은 null 임
// .ready를 붙여주면 /html 을 만났을 때(body태그를 모두 읽었을 때) 실행 되도록 함
$(document).ready(function(){
/*
$('#id').focus(); // id 입력칸에 자동으로 커서가 가도록 지정
$('#id').blur(function(){
if($('#id').val().length < 4){ // 입력한 id 의 value 값에 대한 조건 지정
$('#idMsg').text('ID는 4자 이상 입력해야합니다.');
$('#id').focus();
}else{
$('#idMsg').text('');
$('#pw').focus();
}
});
$('#pw').blur(function(){
if($('#pw').val().length < 4){ // 입력한 pw 의 value 값에 대한 조건 지정
$('#pwMsg').text('PW는 4자 이상 입력해야합니다.');
$('#pw').focus();
}else{
$('#pwMsg').text('');
$('#pwck').focus();
}
});
$('#pwck').blur(function(){
if($('#pwck').val() != $('#pw').val()){ // 입력한 pwck 의 value 값에 대한 조건 지정
$('#pwMsg').text('비밀번호가 일치하지 않습니다.');
$('#pwck').focus();
}else{
$('#pwMsg').text('비밀번호가 일치합니다.');
$('#name').focus();
}
});
// 이름, 생일은 공백만 안들어오게
$('#name').blur(function(){
if($('#name').val().length == 0){ // 입력한 name 의 value 값에 대한 조건 지정
$('#nameMsg').text('이름을 입력해주세요.');
$('#name').focus();
}else{
$('#nameMsg').text('');
$('#birth').focus();
}
});
$('#birth').blur(function(){
if($('#birth').val().length == 0){ // 입력한 birth 의 value 값에 대한 조건 지정
$('#birthMsg').text('생일을 입력해주세요.');
$('#birth').focus();
}else{
// 나이를 구하기 위해서 오늘 년도 & 월 구하기
let today = new Date();
let todayYear = today.getFullYear();
let todayMonth = today.getMonth() + 1;
console.log('Year : ' + todayYear);
console.log('Month : ' + todayMonth);
let age = todayYear - Number($('#birth').val().substr(0, 4));
console.log('age : ' + age);
$('#age').val(age);
$('#birthMsg').text('');
$('.gender')[0].focus(); // 라디오버튼은 여러개이기 때문에 첫번째 값 [0]에 커서 지정
}
});
*/
$('#signinBtn').click(function(){
if($('#id').val().length < 4){ // 입력한 id 의 value 값에 대한 조건 지정
$('#idMsg').text('ID는 4자 이상 입력해야합니다.');
$('#id').focus();
return;
}else{
$('#idMsg').text('');
$('#pw').focus();
}
if($('#pw').val().length < 4){ // 입력한 pw 의 value 값에 대한 조건 지정
$('#pwMsg').text('PW는 4자 이상 입력해야합니다.');
$('#pw').focus();
return;
}else{
$('#pwMsg').text('');
$('#pwck').focus();
}
if($('#pwck').val() != $('#pw').val()){ // 입력한 pwck 의 value 값에 대한 조건 지정
$('#pwckMsg').text('비밀번호가 일치하지 않습니다.');
$('#pwck').focus();
return;
}else{
$('#pwckMsg').text('');
$('#name').focus();
}
// name 유효성 검사
// birth 유효성 검사 >> 나이
// gender 유효성 검사
if($('.gender:checked').length == 0){
$('#genderMsg').text('성별을 선택해주세요.');
$('.gender')[0].focus();
return;
}else{
$('#genderMsg').text('');
}
if($('.hobby:checked').length < 2){
$('#hobbyMsg').text('취미를 2개 이상 선택해주세요.');
$('.hobby')[0].focus();
return;
}else{
$('#hobbyMsg').text('');
}
// 메일 검사
// return 문을 한번도 만나지 않았다 = 유효성 검사 오류가 없다
// 최종적으로 action 주소에 submit
$('#signinBtn').submit();
});
});
</script>
</head>
<body>
<h2>회원가입</h2>
<form id="signinForm" action="./signinAction.jsp">
<table border="1">
<!-- 아이디 -->
<tr>
<td>*아이디</td>
<td>
<input type="text" id="id">
<span id="idMsg" class="msg"></span>
</td>
</tr>
<!-- 비밀번호 -->
<tr>
<td>
<div>*비밀번호</div>
<div>비밀번호확인</div>
</td>
<td>
<div>
<input type="password" id="pw">
<span id="pwMsg" class="msg"></span>
</div>
<div>
<input type="password" id="pwck">
<span id="pwckMsg" class="msg"></span>
</div>
</td>
</tr>
<!-- 이름 -->
<tr>
<td>*이름</td>
<td>
<input type="text" id="name">
<span id="nameMsg" class="msg"></span>
</td>
</tr>
<!-- 생일 -->
<tr>
<td>*생일</td>
<td>
<input type="date" id="birth">
<span id="birthMsg" class="msg"></span>
</td>
</tr>
<!-- 나이 -->
<tr>
<td>*나이</td>
<td><input type="text" id="age" readonly="readonly"></td>
</tr>
<!-- 성별 -->
<tr>
<td>*성별</td>
<td>
<input type="radio" name="gender" class="gender">남
<input type="radio" name="gender" class="gender">여
<span id="genderMsg" class="msg"></span>
</td>
</tr>
<!-- 취미 -->
<tr>
<td>*취미</td>
<td>
<input type="checkbox" name="hobby" class="hobby">여행
<input type="checkbox" name="hobby" class="hobby">게임
<input type="checkbox" name="hobby" class="hobby">등산
<span id="hobbyMsg" class="msg"></span>
</td>
</tr>
<!-- 메일주소 -->
<tr>
<td>*메일</td>
<td>
<span><input type="text" id="email"></span>
<span>@</span>
<select id="emailUrl">
<option value="">선택</option>
<option value="naver.com">naver</option>
<option value="daum.net">daum</option>
<option value="gmail.com">gmail</option>
</select>
<span id="emailMsg" class="msg"></span>
</td>
</tr>
<!-- 메모 -->
<tr>
<td>메모(선택입력)</td>
<td><textarea cols="50" rows="5"></textarea></td>
</tr>
</table>
<button type="button" id="signinBtn">회원가입</button>
<button type="reset">초기화</button>
</form>
</body>
</html>ex08.html 출력결과
JQuery 사용하여 회원가입 폼 작성 + 유효성 검사
MemberController.java (RestController)
package com.gd.ajax.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.gd.ajax.mapper.MemberMapper;
import lombok.extern.slf4j.Slf4j;
@Slf4j
@RestController
@Transactional
public class MemberController {
@Autowired
MemberMapper memberMapper;
@PostMapping("/idCheck")
public int idCheck(@RequestParam(name="id") String id) {
String result = memberMapper.selectMemberById(id);
// 결과물 -> null(사용가능) 또는 존재하는ID(사용불가)
if(result == null) {
return 0; // ID 사용가능
}
return 1; // ID 사용 불가
}
}MemberMapper.java (Mapper)
package com.gd.ajax.mapper;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface MemberMapper {
String selectMemberById(String id);
}MemberMapper.xml (Mapper.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="com.gd.ajax.mapper.MemberMapper">
<select id="selectMemberById" parameterType="String" resultType="String">
SELECT
id
FROM
member
WHERE
id = #{id}
</select>
</mapper>signup.html
<!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>
</head>
<body>
<input type="text" id="id">
<button type="button" id="idck">중복검사</button>
<hr>
<form>
id : <input type="text" id="id2" readonly="readonly">
<button type="button">회원가입</button>
</form>
<script>
$('#idck').click(function(){
console.log('idck버튼 클릭');
if($('#id').val() == ''){
alert('중복검사 아이디를 입력하세요');
$('#id').focus();
return;
}
// ajax + json 을 활용한 ID 중복검사
$.ajax({
url:'/ajax/idCheck',
method:'post',
data : {'id':$('#id').val()},
success:function(json){
if(json == 0){
alert('사용 가능한 아이디 입니다.');
$('#id2').val($('#id').val());
}else{
alert('사용중인 아이디 입니다.');
$('#id').focus();
}
}
});
});
</script>
</body>
</html>signup.html 출력결과
JQuery 사용하여 대분류 - 중분류 - 소분류 검색
SubController.java (RestController)
package com.gd.ajax.controller;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.gd.ajax.mapper.SubMapper;
import lombok.extern.slf4j.Slf4j;
@RestController
@Transactional
@Slf4j
public class SubController {
@Autowired
SubMapper subMapper;
@PostMapping("/large")
public List<String> large(){
return subMapper.selectLargeName();
}
@PostMapping("/medium")
public List<Map<String, Object>> medium(@RequestParam(name="largeName") String largeName){
return subMapper.selectMediumName(largeName);
}
@PostMapping("/small")
public List<Map<String, Object>> small(@RequestParam(name="mediumNo") int mediumNo){
return subMapper.selectSmallName(mediumNo);
}
}SubMapper.java (Mapper)
package com.gd.ajax.mapper;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface SubMapper {
List<String> selectLargeName();
List<Map<String, Object>> selectMediumName(String largeName);
List<Map<String, Object>> selectSmallName(int mediumNo);
}SubMapper.xml (Mapper.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="com.gd.ajax.mapper.SubMapper">
<select id="selectLargeName" resultType="String">
SELECT
large_name largeName
FROM
large
</select>
<select id="selectMediumName" parameterType="String" resultType="Map">
SELECT
medium_no mediumNo,
medium_name mediumName
FROM
medium
WHERE
large_name = #{largeName}
</select>
<select id="selectSmallName" parameterType="int" resultType="Map">
SELECT
small_no smallNo,
small_name smallName
FROM
small
WHERE
medium_no = #{mediumNo}
</select>
</mapper>sub.html
<!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>
</head>
<body>
<select id="large">
<option value="">==== 대분류 선택 ====</option>
</select>
<select id="medium">
<option value="">==== 중분류 선택 ====</option>
</select>
<select id="small">
<option value="">==== 소분류 선택 ====</option>
</select>
<script>
$.ajax({
url:'/ajax/large',
method:'post',
success:function(largeData){
console.log(largeData);
//JQuery for-Each 문
largeData.forEach(function(item){ //아메리카, 아시아, 유럽
console.log(item);
$('#large').append('<option value="' + item + '">' + item + '</option>');
});
}
});
$('#large').change(function(){
if($('#large').val() == ''){
return;
}
$.ajax({
url:'/ajax/medium',
method:'post',
data:{'largeName' : $('#large').val()},
success:function(mediumData){ // mediumData : List<Map>
console.log(mediumData);
$('#medium').empty();
$('#medium').append('<option value="">==== 중분류 선택 ====</option>');
mediumData.forEach(function(item){
$('#medium').append('<option value="' + item.mediumNo + '">' + item.mediumName + '</option>');
});
}
});
$('#medium').change(function(){
if($('medium').val() == ''){
return;
}
$.ajax({
url:'/ajax/small',
method:'post',
data:{'mediumNo' : $('#medium').val()},
success:function(smallData){
console.log(smallData);
$('#small').empty();
$('#small').append('<option value="">==== 소분류 선택 ====</option>');
smallData.forEach(function(item){
$('#small').append('<option value="' + item.smallNo + '">' + item.smallName + '</option>')
})
}
});
});
});
</script>
</body>
</html>sub.html 출력결과
Road OF Developer