카테고리388 [jQuery] Ajax에서 serialize()로 form 데이터 모두 넘기기 HTML 삽입 미리보기할 수 없는 소스 JSP 위 jsp의 form 태그안에 있는 데이터들을 ajax에서 한번에 넘겨줄 것이다. js 원래대로라면 주석과 같이 컨트롤러로 데이터를 넘길때, 하나하나 지정해주어야하지만, serialize()를 사용하면 데이터들이 name에 준 이름으로 한번에 넘어간다. Send 버튼을 누르면 데이터들이 알아서 직렬화되서 이름에 맞게 넘길 수 있다. DTO와 컨트롤러 CardFormBean 객체를 생성해서 컨트롤러에서 바로 찍어봐도 매개변수가 같으면 값이 찍히는걸 확인할 수 있다. 2023. 9. 13. [jQuery] RestApi 사용해서 Ajax 데이터 뽑아내기 DB데이터에 저장된 데이터 뽑기 컨트롤러 DB에 저장된 데이터들을 조회하여 컨트롤러에서 List에 담긴 데이터들을 Ajax로 return 시키는 것이다. HTML 삽입 미리보기할 수 없는 소스 $(v).each(function(index, x) { ... });: 이 부분은 서버에서 받은 데이터(v)를 순회하면서 각 항목을 처리한다. $(v)는 받은 데이터를 jQuery 객체로 변환한다. .each() 함수를 사용하여 데이터를 순회하며 각 객체(x)에 대한 처리를 수행한다. *아래에서 자세히 예제들어 설명 내부 순회($(Object.keys(x)).each(function(index, xx) { ... })): 각 객체(x)의 속성을 순회하면서 테이블의 헤더()와 데이터()를 생성한다. Object.ke.. 2023. 9. 13. [Spring] Ajax 다양한 방법, @ResponseBody와 @RequestBody 컨트롤러 HTML 삽입 미리보기할 수 없는 소스 jsp, js HTML 삽입 미리보기할 수 없는 소스 다음과 같은 코드가 있다. EX1) 버튼을 클릭하게되면, console창에 'basicAjax1/ajaxData1' 이라는 문자열을 출력해보고자 한다. js에서 jQuery를 이용해 컨트롤러로 한번 거친다음, 컨트롤러에서 단순 문자 'basicAjax1/ajaxData1' 를 갖고 돌아온다. 이 예제가 Ajax 데이터를 뿌리는 가장 기초적인 방법이다. Ex2) 두번째 버튼을 클릭하게 되면, Map 형태로 Console에 데이터들이 나타난다. JS 데이터를 JSON 형태로 만들어 컨트롤러에 넘겨주는데, 이때 data를 JSON.stringify(jsonValue)를 지정해야한다. data: JSON.str.. 2023. 9. 13. [Spring-Legacy] Ajax 사용시 with a status of 406 () 해결법 xml로 Ajax써서 Json으로 데이터를 다시 받기까지 고난에 고난의 연속이다. 드디어 해결이 됬다. 방법은 간단하다 porm.xml HTML 삽입 미리보기할 수 없는 소스 위 코드를 넣어주었다. servlet-context.xml 위 한줄을 추가해주면 DB에 저장된 데이터들이 아래 컨트롤러를 통해 성공적으로 Ajax로 넘어간걸 볼 수 있다. 컨트롤러 Ajax에서 갖고온 데이터 조회 후 조회된 결과값 반환한다. 2023. 9. 12. [Spring] 타임리프(Thymeleaf)에서 자바스크립트 inline 사용법 보호되어 있는 글 입니다. 2023. 9. 10. [Spring-Legacy] 파일 데이터 업로드하기 multipart/form-data jsp multipart/form-data를 사용하는 경우, 폼 데이터는 일반적인 텍스트 데이터와 함께 이진 데이터(파일 업로드)를 포함하는 멀티파트 형식으로 전송된다. 이 형식을 사용하면 서버에서 이진 파일 데이터를 정확하게 해석하고 처리할 수 있다. 뷰 jsp 저장버튼을 누르면 이벤트가 발생되도록 하기위해 id에 save를 넣어주었다. jsp jQuery구문으로 클릭시 each를 이용해 각각 값들을 출력해본다. 작성자, 제목, 비밀에 대한 길이를 모두 조회하여 0이면 특정 이벤트가 발생되도록 할 것이다. jsp 이렇게 inputText 값을 넣어주고 저장을 눌렀는데 Controller 값이 안넘어 가있다. 왜그럴까? servlet-context.xml beans에 multipartResolver를 추.. 2023. 9. 8. [jQuery] JSON 데이터 띄우기 (prop, each, attr) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 다른 jsp 파일을 만들어 JSON 객체로 데이터를 넣어주었다. ajax 함수를 생성해서 url로 JSON 객체 지정했던 걸 넣어주고, 하나씩 체크될 때마다 ajax를 실행시켜줄것이다. 결과화면 개발자 모드로 가서 콘솔을 확인해 보았더니 이렇게 데이터가 찍혀있는걸 확인해볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 박아 넣어주면 된다. 하나더 연습해보려고한다. jp1Ajax.jsp HTML 삽입 미리보기할 수 없는 소스 jsp 파일에 JSON 객체를 생성해주었다. view (html과 jQuery) view 페이지가 열리면 이렇게 select 박스가 뜨게되면서 웹 페이지 로딩 후 jQuery가 실행되도록.. 2023. 9. 7. [jQuery] prop이용해서 checkbox 전체 체크 선택 및 해제 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .is(':checked') 체크 박스가 체크되었는지 확인하는 요소이다. .prop('checked', !checked) 이전에 확인한 checked 변수의 반대 값을 사용하여 모든 체크박스의 체크 상태를 변경한다. 즉, 만약 "전체 선택" 체크박스가 체크되어 있다면, 모든 체크박스가 체크 해제되고, 그 반대의 경우에는 모든 체크박스가 체크된다. 만약 Click1 의 버튼만 활성화 하고싶다면 HTML 삽입 미리보기할 수 없는 소스 .eq(0) 와 같이 위 코드에 한줄만 추가해주면 된다. 2023. 9. 7. [jQuery] Click시 만들어 놓은 CSS 스타일 넣어주기 보호되어 있는 글 입니다. 2023. 9. 7. [jQuery] 입력 문자열 제한 keyup( ) 과 slice( ) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $('textarea').keyup(function(){ ... }); textarea 요소에서 키보드 이벤트(keyup)를 감지하고 그에 따른 동작을 정의한다. keydown : 키보드가 눌러지는 순간 발생 keypress : 글자가 입력될때 발생 keyup : 입력후 손가락이 떼어질때 발생 var inputLength = $(this).val().length; 현재 textarea의 값(입력된 텍스트)의 길이를 계산하여 inputLength 변수에 저장한다. slice(0, 10) 이 메서드는 문자열의 일부분을 추출하거나 잘라내는 데 사용된다. 0: 시작 인덱스 10: 종료 인덱스 이 경우 10은 문자열에서 추출하려는 부분.. 2023. 9. 5. [jQuery] 버튼 hover로 색상변경 addClass, removeClass HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $(this).addClass('btnColor') 현재 버튼에 btnColor라는 클래스를 추가한다. 버튼에 클래스가 추가되면 버튼의 스타일이 변경될 수 있다. $(this).removeClass("btnColor") 현재 버튼에서 btnColor 클래스를 제거한다. 버튼의 스타일이 원래대로 돌아간다. 2023. 9. 4. [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 JSON 표기법 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 배열 HTML 삽입 미리보기할 수 없는 소스 ID : admin pw : 1234 로그인 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 2023. 9. 4. 이전 1 2 3 4 5 6 7 8 ··· 33 다음
