Review.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- 웹페이지 타이틀 -->
<title>리뷰공간</title>
<!-- Reqyired meta tags -->
<meta charset="utf-8">
<!-- custom css -->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/review.css">
<!-- js -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
제이쿼리 시작
<script type="text/javascript">
$(document).ready(function(){
$("#reviews-box").html("");
getReview
});- 제이쿼리 작성 기본 형식 : $(선택자). 액션();
- $ : 제이쿼리를 의미하며, 제이쿼리를 시작하는 식별자
- 선택자 : 원하는 요소를 선택
- 액션 : 선택한 요소에 원하는 동작을 지정하기 위한 함수와 메소드
$(document).ready(function(){
: 'html문서의 로딩이 다끝나면' > document라는 객체의 준비가 끝나면, 로드가 완료되면 함수를 실행한다.
* document : 하나의 html 파일을 나타내는 트리의 루트 노드 객체
* .ready() : DOM이 완전히 로드 될 때 실행할 함수를 지정하는 이벤트 메소드
* $.function() : jQuery 함수를 실행하는 함수
$("#reviews-box").html("");
* #reviews-box : 저장된 리뷰 박스
* html("") : 일치하는 요소 집합에서 첫번쨰 요소의 html 콘첸츠를 가져오는 속성과 관련된 메소드
function saveReview(){
let rno = $("#rno").val();
let mno = $("#mno").val();
let rdate = $("#rdate").val();
let rtitle = $("#rtitle").val();
let rauthor = $("#rauthor").val();
let rcontent = $("#rcontent").val();
변수 let var
- let은 재선언되지 않는다. (같은 이름으로 재선언하면 새로운 값을 저장하는것이 아닌 오류가 발생한다)
- let은 자신이 속한 코드블럭{} 안에서만 작동한다. 변수 통제가 가능하다.
- let은 호이스팅이 일어나지 않는다. ( 호이스팅 : 함부 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 뜻함.> 미리 선언문을 실행해둔다고 이해!)
- let은 글로벌 객체 속성을 생성하지 않는다.
let을 써야하는 이유는 변수 선언할때 의도치 않은 변수값 변경을 피할 수 있어 오류가 적고, 변수 통제가 가능하고, 호이스팅이 일어나지 않아 안전하기 때문.
다시한번 보는 제이쿼리 작성 기본형식
- $(선택자). 액션();
- $ : 제이쿼리를 의미하며, 제이쿼리를 시작하는 식별자
- 선택자 : 원하는 요소를 선택
- 액션 : 선택한 요소에 원하는 동작을 지정하기 위한 함수와 메소드
let rno = $("#rno").val();
let rno > 함수 선언
$(:#rno") 제이쿼리시 시작, 선택자 rno 요소 선택
.val() : 일치하는 요소 집합의 첫번째 요소의 현재 값이나 일치하는 모든 요서 값을 설정하는 액션
$.ajax({
url:"./EunsukBookReview", //요청할 서버url
type:"post", //post 타입
dataType : 'text' //수신 타입
data:{rno: rno, mno:mno, rdate:rdate, rtilte:rtitle, rauthor:rauthor, rcontent:rcontent}, //수신타입
success: function(response) {
window.location.reload();
}
get 방식 post 방식 차이
- get : 서버에서 데이터를 읽고 싶을 때 (브라우저 주소창에 url을 적으면 그곳으로 get요청을 날려준다.)
- post : 버로 데이터를 보내고 싶을 때(
서버 : 유저가 데이터를 요청하면 데이터를 보내주는 프로그램
<body> 태그 안에 사용된 태그 정리
onclick 이벤트 사용 방법
<div class="review">
<button onclick="saveReview()" type="button">리뷰 작성완료</button>
</div>
onclick 이벤트는 버튼을 클릭했을 때 특정 기능을 수행하게 해준다.
> 사용자가 양식을 제출하거나 웹 페이지의 특정 콘텐츠를 변경할 때
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 240208 스프링 맛보기 (0) | 2024.02.08 |
|---|---|
| 240207 게시판만들기 (0) | 2024.02.07 |
| 240204 HTML 복습 (0) | 2024.02.04 |
| 240204 jQuery복습하기 (0) | 2024.02.04 |
| 240204 ajax 복습하기 (0) | 2024.02.04 |
