✨ Front-end/jQuery13 [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. [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. 이전 1 2 3 4 다음
