모달 이용해서 모달안에 데이터 넣기

모달을 띄우는 방법

1. button으로 띄우기
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default"> Launch Default Modal </button>
2. a 태그로 띄우기
<a data-toggle="modal" href="#modal-default">Open Modal</a>
3. 기타 요소로 띄우기
<p data-toggle="modal" data-target="#modal-default">Open Modal</p> -->
<!-- bookVO -> attachVOList 멤버변수 ->
List<AttachVO> JSTL누적 : c set var="auth" value="" c set var="auth" value="달러{auth += ' ' += 누적할값} --> $('#id').modal('show'); $('#id').modal('hide');

<p data-toggle="modal" data-target="#modal-lg">Open Modal</p>
	<!-- 직원 상세 모달 지식 -->
	<p>
	<div class="modal fade" id="modal-lg">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Large Modal</h4>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>One fine body&hellip;</p>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	</p>
	<!-- 직원 상세 모달 끝 -->

 

table.td태그 넣기

<table border=1>
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>주소</th>
				<th>전화번호</th>
				<th>급여</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="employeeVO" items="${articlePage.content}"
				varStatus="stat">
				<tr>
					<td data-toggle="modal" data-target="#modal-lg">${employeeVO.empNo}</td>
					<td><a href="/employee/detail?empNo=${employeeVO.empNo}">${employeeVO.empName}</a></td>
					<td>${employeeVO.empAddress}</td>
					<td>${employeeVO.empTelno}</td>
					<td>${employeeVO.empSalary}</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	<p data-toggle="modal" data-target="#modal-lg">Open Modal</p>
	<!-- 직원 상세 모달 지삭 -->
	<p>
	<div class="modal fade" id="modal-lg">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Large Modal</h4>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>One fine body&hellip;</p>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	</p>
	<!-- 직원 상세 모달 끝 -->

elements창

js

$(".clsEmpNo").on("click",function(){
    console.log("clsEmpNo에 왔다");
});

empNo 끌고 오는 방법

• this : 동일 클래스 속성의 오브젝트 배열 중에서 클릭한 바로 그 오브젝트

let empNo = $(this).data("empNo");

vo 프로퍼티명에 맞춰서 사용

결과창

비동기 통신

쿼리문

직원 상세보기위한 쿼리문

SELECT
EMP_NO, EMP_NAME, EMP_ADDRESS, EMP_TELNO, EMP_SALARY, FILENAME, EMP_PWD, ENABLED
FROM
    employee
where  EMP_NO='A004'   
    ;

EmployeeController.java

요청URI :/employee/detailAjax 
요청파라미터(JSON.stringify):{"empNo":"A013"}
요청방식 :post

//비동기(Asynchronous) : 1)RequestBody(JSON 받음) /ResponseBody(JSON보냄)
@ResponseBody
	@PostMapping("/detailAjax")
	public EmployeeVO detailAjax(@RequestBody EmployeeVO employeeVO) {
		employeeVO = this.employeeService.detail(employeeVO);
		log.info("employeeVO"+employeeVO);
		
		//2) return데이터
		return employeeVO;
	}

list.jsp

$(function() {
		$(".clsEmpNo").on("click",function(){
			console.log("clsEmpNo에 왔다");
			//this : 동일 클래스 속성의 오브젝트 배열 중에서 클릭한 바로 그 오브젝트
			//클릭 :<td class="clsEmpNo" data-toggle="modal" data-target="#modal-lg" data-emp-no="A004">A004</td>
			let empNo = $(this).data("empNo"); //A014
			console.log("empNo:",empNo);
			//JSON오브젝트
			let data ={
					"empNo":empNo
			};
			console.log("data:",data);
			
			
			/*
		    요청URI : /employee/detailAjax
		    요청파라미터(JSON.stringify) : {"empNo":"A013"}
		    요청방식 : post
		    */
		    $.ajax({
		    	url:"/employee/detailAjax",
		    	contentType:"application/json;charset=utf-8",
		    	data:JSON.stringify(data),
		    	type:"post",
		        beforeSend:function(xhr){
		               xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
		            },
		    	success:function(result){
		    		console.log("result",result)
		    		
		    	}
		    })

 

시큐리티 적용시켜서 

      beforeSend:function(xhr){
               xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
            },

success 앞에 넣어줘야 한다

$.ajax({
    url:"/employee/detailAjax",
    contentType:"application/json;charset=utf-8",
    data:JSON.stringify(data),
    type:"post",
    beforeSend:function(xhr){
           xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
        },
    success:function(result){
        console.log("result",result)
        $("#empNo").val(result.empNo);
        $("#empName").val(result.empName);
        $("#empAddress").val(result.empAddress);
        $("#empTelno").val(result.empTelno);
        $("#empSalary").val(result.empSalary);
        $("img[name='filename']").attr("src","/resources/upload/"+result.filename);
    }
})

 

---

예시2)

list.jsp

<tr>
    <td class="clsBookId" data-book-id="${bookVO.bookId}">${bookVO.rnum}</td>
    <td><a href="/detail?bookId=${bookVO.bookId}"> ${bookVO.title}</a></td>
    <td>${bookVO.category}</td>
    <td><fmt:formatNumber value="${bookVO.price}" pattern="#,###"/>
</tr>

태그 있는 경우 book-id로 변경

js 사용할 경우 bookId로 변경

js

//<td class="clsBookId" data-book-id="131">1</td>
	let bookId= $(this).data("bookId");//131

console.log("bookId",bookId)