Java Script 3

[JavaScript] ajax으로 form 데이터 controller로 보내기

ajax을 사용하여 form 데이터를 통째로 컨트롤러에 보낼 때는 from 엘리먼트를 잡아서 제이쿼리에서 제공하는 serialize() 함수를 사용해주면 한번에 전송 가능한 data로 간편하게 만들어준다. document.getElementById("editBtn").onclick = function(){ $.ajax({ type: "post", url:"./accountInfo_Edit", data: $("#editForm").serialize(), success: function(result){ if(result){ alert("정상적으로 변경되었습니다."); } },error: function(){ console.log("실패"); } }); };

Java Script 2022.06.20

[JavaScript] 업로드 이미지 미리보기 구현 (단일/다중)

1. 단일 이미지 미리보기 input 태그에 type = file function imageChange(event){ let img = document.createElement("img"); const reader = new FileReader(); reader.onload = function(event){ img.setAttribute("src", event.target.result); } reader.readAsDataURL(event.target.files[0]); document.querySelector("#imageContainer").appendChild(img); } 2. 다중 이미지 미리보기 input 태그에 type = file , multiple 속성 추가 function imageCh..

Java Script 2022.05.28

객체 (getter, setter 공부 후 추가정리 필요)

※ Geter / Seter 공부하고 추가해야 함! let person = { name: "songlee", gender: "female", age: 24, greet: function () { // 또는 function 키워드를 생략하여 Greet(){ } 로 사용할 수 있음 console.log(`안녕하세요, 제 이름은 ${this.name} 입니다.`); } } ※ 메소드 내부에서 객체명을 직접 사용하지말고 되도록이면 this 를 사용하자. ※ 화살표 함수 (arrow function)는 일반 함수와 달리 자신만의 this를 가지지 않으므로, 메소드 선언 시 화살표 함수를 지양할 것 1. key값으로 value에 접근, 추가(수정), 삭제 person.name = "송이"; person['name'..

Java Script 2021.12.21