ajax 7

[SpringBoot / JSP] AJAX로 여러 이미지 파일 업로드 서버에 전송하기

1. JSP [태그 부분] 업로드 [자바스크립트 부분] var inputFileList = new Array(); // 이미지 파일을 담아놓을 배열 (업로드 버튼 누를 때 서버에 전송할 데이터) // 파일 선택 이벤트 $('input[name=images]').on('change', function(e) { var files = e.target.files; var filesArr = Array.prototype.slice.call(files); // 업로드 된 파일 유효성 체크 if (filesArr.length > 3) { alert("이미지는 최대 3개까지 업로드 가능합니다."); $('input[name=images]')val(); return; } filesArr.forEach(function(f..

개발/Spring 2021.09.27

AJAX로 JSON 보내서 컨트롤러(서버)에서 받기

[{'fruit1':'apple', 'fruit2':'banana'}] 위와같은 형태를 서버에서 List로 받게 하려면 1. 클라이언트 - javascript let param = [{'fruit1':'apple', 'fruit2':'banana'}]; $.ajax({ type:'post' , contentType:'application/json' , data: JSON.stringify(param) , url: '/test' , success: function(data) { alert(data); }, error:function(e) { alert("error: " + e); } }); - Request의 Method는 GET이 아닌 메소드로 (Request Body에 JSON을 담아 보낼 것이기 때문..

개발/Spring 2021.09.24

Springframework, Ajax에서 한글이 물음표로 나오는 현상

Ajax로 호출한 다음, 결과값을 alert으로 한글을 띄우려는데 자꾸 ???? ???? 로 나오는 것이었다. 서버 코드 @RequestMapping(value = "/add") public @ResponseBody String add() { return "성공했음"; } javascript 코드 $.ajax({ url : '/add' , success : function(data) { alert(data); } }); 얼럿 결과: ???????? 구글신을 통해 여러가지 방법을 시도해봤다. 1) jsp상단에 추가 이래도 안됨 2) ajax 코드에 추가하고 contentType: "application/x-www-form-urlencoded; charset=UTF-8", 서버에서 스트링을 UTF-8로 디코..

개발/Spring 2015.04.03

[jquery] Ajax로 배열 파라미터 넘길 때 인코딩 깨지는 현상

자바스크립트에서 배열을 만들어서 ajax로 파라미터를 보내려고 했다. 아래처럼.. 내가 원한 요청 URL은 이거였다. http://marobiana.tistory.com/test/save?value=aaa&value=bbb 근데 실제로 간것은.. 이렇게 깨짐 ㅎㅎ http://marobiana.tistory.com/test/save?value%5B%5D=aaa&value%5B%5D=bbb 해결법은 아래코드를 ajax 호출전에 추가하면 된다. jQuery.ajaxSettings.traditional = true; 스택오버플로에서 찾았는데, jquery 1.4 이상부터 요즘 스크립트 언어(루비나 php)같은 프레임워크를 수용하기 위해 반복적인 파라미터의 경우 자동으로 serialize를 한다고한다. 그것을 ..

개발/Javascript 2014.06.18

Ajax 한글 깨짐 인코딩 방법

맨날 까먹는 이것 ㅋㅋㅋ AJAX 호출할 때 한글 깨져서 DB에 들어가는 현상.. 1. 페이지 맨위에 아래와 같이 추가해주고.. ​ 2. AJAX로 호출하고... $.ajax({ url: '/society/insert_univ.json', data: {"name":name, "address":address}, method: 'post', success:function(data) { alert("성공"); }, error:function() { alert("실패"); } }); 3. 받는 쪽에서 (서버) 글자를 디코딩 해준다. @RequestMapping("insert_univ.json") public @ResponseBody Integer insertUniv( @RequestParam(value = "n..

개발/JSP 2014.04.08

[jQuery] Ajax의 흐름과 예제

1. AJAX(Asynchronous Javascript and XML)란 무엇인가? Ajax의 예를들면, 네이버나 다음같은 포털사이트에 가보면, 메인페이지에서 뉴스 등 밑에 요런 버튼을 눌렀을 때 페이지가 Reloading 되지 않고 뜨는걸 볼 수있다. 보통 웹의 흐름에서는 새로운 URL로 호출 되면서 페이지가 새로 뿌려지지만,AJAX를 사용하면 일부만을 로드해올 수 있는 것이다.이름처럼 비동기 통신을 통해서. 2. 어떤 원리이고 흐름인가? 보통 웹사이트 들어갈 때 어떻게 들어가는가?브라우저 위에 주소창에 URL을 쓰고 들어간다. 그러면 브라우저가 그 URL(서버)로 연결시켜준다.서버에서 받아온 데이터들을 브라우저가 받아서 파싱해서 뿌려준다. 이게 보통 웹의 흐름이라면, AJAX는 AJAX ..

개발/Javascript 2013.06.14

Ajax로 받아온 데이터에 이벤트 걸기

내가 만든 프로그램중에 이런 버그가 있었다. 친구 목록이 쭉~ 있고, 친구한테 쪽지를 보내는 것이었는데 친구목록에서 더보기를 누른 후 나타난 친구 목록에서는(Ajax로 친구목록 더 가져옴) 쪽지가 안보내졌다. 일단, 더보기를 누르고 나면 자바스크립트로 새로운 친구목록을 append 했을 것이다. 그 append 된 곳에서 쪽지 보내는 event가 작동하지 않은 것인데.... 왜? 왜? 왜? 새로 가져온 친구목록에는 클릭 이벤트가 바인딩 되지 않았기 때문이다. 해결 방법은.... body 영역에 클릭이벤트를 주는 것이다. $('body').on('click', 'button.message', function(e) { // 구현 });

개발/Javascript 2012.07.30