Jun's TID

문제: #search 버튼 클릭시 ajaxCallTest4.jsp url로 ajax를 호출하여연관검색단어를 조회하여 #str에 출력. 단, ajax에 배열 형태를 넘겨야 하기 때문에 {'키[]' : 배열객체} 형식으로 데이터를 전달해야한다. ◎ 04_ajaxTest4.html 연관검색단어를 조회 취미 축구 수영 게임 연관단어검색 ▶ 연관단어 ◎ search_words.js /** * search_words.js */ $(document).ready(function() { $('#search').click(function() { var input = $('#types').val(); var request = $.ajax({ url: "ajaxCallTest4.jsp", method: "POST", data..

ajax 이해를 위한 3번째 예제이다. 버튼 클릭시, 선택창에서 선택된 숫자만큼의 크기를 갖는 배열(List)을 반환하여 #myName에 출력하는 기본적인 문제이다. (JS 폴더 내에 jQuery 코드를 따로 작성하여 html 에서 로드하는 방식으로 풀이하였다.) ◎ 03_ajaxTest3.html 1 2 3 4 5 배열크기 전송 ◎ ajax_array_size.js /** * ajax_array_size.js */ $(document).ready(function() { $('#call').click(function() { var input = $('#num').val(); console.log(input); var request = $.ajax({ url: "ajaxCallTest3.jsp", meth..

jQuery를 활용한 비동기 통신은 기본적으로 다음의 구조로 이뤄진다. 1. jQuery 내부에서 요청할 데이터를 생성하고 전송 //특정 이벤트, 트리거의 내부에 request 객체 선언 var request = $.ajax({ url: "전송할 주소", // 호출(요청) 대상 method: "POST", // 전송 방식 data: { // jsp가 읽어낼 파라미터명: 전송값 //데이터 맵핑 }, dataType: "json" // 응답받을 타입 }); // 응답에 성공했을 경우 request.done(function(data) { console.log(data); alert(data.result); }); // 응답에 실패했을 경우 request.fail(function(jqXHR, textStatus..

우선 AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 지금까지 공부한 jQuery 프레임워크에서 해당 비동기 통신을 지원하도록 ajax() 함수를 제공하기 때문에 해당 카테고리의 대부분의 예제는 jQuery를 사용하여 구현할 예정이다. 그럼 빠른 이해를 위해 간단한 기초 예제로, 비동기 통신을 이용하여 아이디 중복 확인 기능을 구현해보자. 1. 우선, 데이터를 보낼 html 쪽에..