JavaScript/JQuery
-
환경구성 : Spring Boot + Jquery + Thymeleaf Jquery ajax를 통해 Spring Boot Controller로 데이터를 보낼때 415 에러, 400 에러가 났다. 결론1. Controller 로 ajax를 통해 Json 데이터를 보낼땐 String 형태로 보내기HTTP 프토로콜 요청의 본문(Body) 에 들어가는 데이터는 문자열이어야 한다.Ajax 또는 Axios 를 통해 요청을 보낼 때 Javascript 객체를 그대로 보낼수는 없고문자열로 직렬화 해야한다. 방법const user = { name: "홍길동", age: 30 };axios.post('/api/test', JSON.stringify(user), { headers: { 'Content-Type': 'app..
Jquery Ajax 415 에러(occure Ajax request Error. status code:415, request uri), 400 에러환경구성 : Spring Boot + Jquery + Thymeleaf Jquery ajax를 통해 Spring Boot Controller로 데이터를 보낼때 415 에러, 400 에러가 났다. 결론1. Controller 로 ajax를 통해 Json 데이터를 보낼땐 String 형태로 보내기HTTP 프토로콜 요청의 본문(Body) 에 들어가는 데이터는 문자열이어야 한다.Ajax 또는 Axios 를 통해 요청을 보낼 때 Javascript 객체를 그대로 보낼수는 없고문자열로 직렬화 해야한다. 방법const user = { name: "홍길동", age: 30 };axios.post('/api/test', JSON.stringify(user), { headers: { 'Content-Type': 'app..
2022.07.26 -
가장 중요한 ordering의 옵션을 true로 설정한다.그 다음 rowReorder 옵션에 dataSrc 속성을 통해 순서 재정렬을 위한 seq 번호를 설정한다. * ordering 옵션을 설정 안할경우 테이블 리스트의 순서가 변경되지 않는다.let bannerDataTableOption = { scrollCollapse : false, select : false, language:eval(datatable_lang), dom : "t", autoWidth: false, ordering: true, searching: false, // 검색 기능 paging: false, //페이징 기능 processing: true, rowReorder: { ..
DataTables rowReorder 옵션 사용하기(테이블 재정렬)가장 중요한 ordering의 옵션을 true로 설정한다.그 다음 rowReorder 옵션에 dataSrc 속성을 통해 순서 재정렬을 위한 seq 번호를 설정한다. * ordering 옵션을 설정 안할경우 테이블 리스트의 순서가 변경되지 않는다.let bannerDataTableOption = { scrollCollapse : false, select : false, language:eval(datatable_lang), dom : "t", autoWidth: false, ordering: true, searching: false, // 검색 기능 paging: false, //페이징 기능 processing: true, rowReorder: { ..
2022.07.26 -
form 태그에 추가되어 있는 태그를 제외하고 다른 데이터를 파라미터로 추가 해야할 경우 사용한다.구성환경 : Spring boot + Thymeleaf 템플릿엔진 + Jquery html 저장 script Jquery 의 .serialize() 함수를 사용하면 Form 태그 안의 데이터들을 한번에 모두 보낼 수 있는 데이터로 직렬화 해주기 때문에 사용한다. Form data를 .serialize() 함수를 통해서 데이터 직렬화를 시키면 아래 이미지와 같다.위 이미지와 같이 "&" 표시와 함께 데이터가 표시된다. .serialize() 함수를 통해 form_data에 저장하고 추가할 데이터는 "&변수명=변수값" 으로 문자열을 추가해준다.그런 다음 .submit() 함수를 통해 Controll..
form 태그에 동적으로 파라미터 추가form 태그에 추가되어 있는 태그를 제외하고 다른 데이터를 파라미터로 추가 해야할 경우 사용한다.구성환경 : Spring boot + Thymeleaf 템플릿엔진 + Jquery html 저장 script Jquery 의 .serialize() 함수를 사용하면 Form 태그 안의 데이터들을 한번에 모두 보낼 수 있는 데이터로 직렬화 해주기 때문에 사용한다. Form data를 .serialize() 함수를 통해서 데이터 직렬화를 시키면 아래 이미지와 같다.위 이미지와 같이 "&" 표시와 함께 데이터가 표시된다. .serialize() 함수를 통해 form_data에 저장하고 추가할 데이터는 "&변수명=변수값" 으로 문자열을 추가해준다.그런 다음 .submit() 함수를 통해 Controll..
2022.07.12 -
웹 화면을 구현하면서 날짜뿐만이 아니라 시간까지 필요할때가 있다. 이때 jquery의 datetimepicker 라이브러리를 사용한다. 환경구성은 Spring Boot + Thymeleaf 템플릿 엔진 + jquery 사용 1. 다운로드 위치https://xdsoft.net/jqplugins/datetimepicker/ DateTimePickerDateTimePicker jQuery plugin select date and time Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on Git..
Jquery datetimepicker 기본 설정웹 화면을 구현하면서 날짜뿐만이 아니라 시간까지 필요할때가 있다. 이때 jquery의 datetimepicker 라이브러리를 사용한다. 환경구성은 Spring Boot + Thymeleaf 템플릿 엔진 + jquery 사용 1. 다운로드 위치https://xdsoft.net/jqplugins/datetimepicker/ DateTimePickerDateTimePicker jQuery plugin select date and time Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on Git..
2022.07.12 -
$(function(){}) 아래 구문의 축약형이다. 페이지 로딩이 끝났을 때 실행될 함수를 등록한다. 실행 예) $(function(){ }) $(document).ready(funtcion(){}) DOM(Document Object Model)이 완전히 불러와지면 실행되는 이벤트이다. 쉽게 말하자면 페이지가 모두 로드된 후 괄호안의 함수를 실행한다. 실행 예) $(document).ready(function(){ });
$(function(){}) 과 $(document).ready() 의 차이$(function(){}) 아래 구문의 축약형이다. 페이지 로딩이 끝났을 때 실행될 함수를 등록한다. 실행 예) $(function(){ }) $(document).ready(funtcion(){}) DOM(Document Object Model)이 완전히 불러와지면 실행되는 이벤트이다. 쉽게 말하자면 페이지가 모두 로드된 후 괄호안의 함수를 실행한다. 실행 예) $(document).ready(function(){ });
2022.03.14