스프링 : $getJSON, 팝업, encodeURI vs encodeURIComponent

즉시 실행 함수

<script>
      $(document).ready(function(){
            (function(){
                  
            });
      })
</script>

함수 표현은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거친다.

BUT, 즉시 실행 함수는 함수를 정의하고 바로 실행하는 이러한 과정을 거치지 않음! 바로 호출한다

---

$.getJSON 사용법

jQuery에서 getJSON()함수를 통해서 json 파일을 읽어올 수 있다.

사용 방법 jQuery.getJSON( url [, data] [, success] )

      $(document).ready(function(){
            (function(){

                  var bno = '<c:out value="${board.bno}"/>';

                  $.getJSON("/board/getAttachList", {bno: bno},function(arr){
                        console.log(arr);
                  });// end getjson
            })(); // end function
      })

/board/getAttachList의 url에 있는 data값을 가져올 수 있다.

bno값들이 찍히는 것을 확인.

---

button 기본 속성 submit

button type이 submit이 아닌데도 list로 단순이동 하려고 했는데, submit으로 작동한다.

 

default값이 submit인 것 같애서 찾아본 결과 submit이 맞았다.

 

고로 단순 이동하는 버튼은 type을 "button"으로 명시해두는것이 좋은 습관이다.

---

java.nio.file.NoSuchFileException

첨부파일 할때 오류가 발생했음...

이미지의 이름에 +가 들어가면 파일을 찾지 못했다.

---

팝업

      function showImage(fileCallPath){
            let url = "/display?fileName=" + fileCallPath;
            let title = "attachPopup";
            let status = "toolbar=no,scrollbars=no,resizable=yes,status=no,menubar=no";
            window.resizeTo(800, 800);
            window.open(url,title,status);
      }

resizeTo를 이용해서 팝업의 크기를 저장하고

status를 활용해서 팝업의 설정들을 끄고 킬 수 있다.

---

encodeURIComponent() vs encodeURI

encodeURI는 알파벳, 0~9의 숫자, ; , / ? : @ & = + $ #    - _ . ! ~ * ' ( ) 를 제외한 문자를 인코딩(이스케이프 처리)

encodeURIComponent는 알파벳,0~9의 숫자 - _ . ! ~ * ' ( ) 를 제외한 문자를 이스케이프 처리

 

파라미터 값에 & 등의 특수한 기능을 하는 문자가 들어가는 경우 encodeURI로 전체를 인코딩하는 경우 문제가 생길 수 있으므로 파라미터가 포함되지 않은 path부분은 값자체만 넘겨주고 encodeURIComponent를 사용해서 인코딩 하는 방법 추천.

 

encodeURI를 사용하면 이미지 이름에 1+1 이런식으로 "+" 특수 문자가 들어가게 되면 파일을 못찾는 경우가 있을수 있다.

---

동적 태그를 만들때 주의점

                  // ul 태그 만들기 없으면 안보여줬음
                  $(".uploadPreview").html("<ul></ul>");

.html을 이용하면 안에 있는 모든 태그가 없어지고 html로 바뀌게 때문에 이런식으로 동적으로 먼저 만들고

그 다음 동적 태그를 이용하면 된다.

---