[java] spring 환경에서 Ajax - queryString / html 방식 [펌]

[java] spring 환경에서 Ajax - queryString / html 방식 [펌]

 

 

• 프로세서
  • keyup:이벤트로 처리 :  이벤트로 처리 입력시, 조회내용을 화면에 뿌려줌
  • dataType : html
  • jsp화면 호출.. -> html
  • 결과물은 초기화면에 불러서 뿌려줌
• 초기화면 호출
• 화면 단에서 조건 검색
• 조건 내용에 대한 부분을 Controller로 호출
• 개발순서
  • 초기화면호출 메서드 구현 method=init
  • emplist
  • 검색 text : ename, job
  • keyup() 이벤트 처리
    • url : emp.do?method=ajaxlist
    • dataType:"html"
    • data:queryString(값)
    • 주소,queryString,처리후, 함수
  • 검색(query String) : ename = @@@&job =@@@
  • $.ajax
  • $.post(방식2)
• Controller
• View단(초기화면)
• Controller 호출,emp.do?method=ajaxlist
• db연결 후, 결과값 jsp로 가져옮
• 원본 View단에 결과값 html을 리턴
• 보낼 객체를 queryString 형태로 만듬
• 결과 값은 페이지 자체를 받는식으로 해서 div에 뿌려줌

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$("input").keyup(function(){     //queryString 형식     //받는객체의 setXXX 를 타고 알아서 세팅됨     var send="title="+$("#title").val()+"&wirter="+$("#writer").val();              $.ajax({         url:"ajaxboard.do?key=sch",         data:send,         dataType:"html",         method: 'post',         success:function(data){ //page 자체를 받아서 div에 넣는식             $("div").html(data);         },error:function(request,status,error){              alert("code:"+request.status+"\n"+"message:"              +request.responseText+"\n"+"error:"+error);          }     }) }) Colored by Color Scripter

cs

• 받는 Ctrl 부분
• parameter (Board ) 객체에 setXXX 메서드를타고 queryString 에으로 보내진 문자열의 XXX=값이 자동으로 set되면서 객체가 만들어짐
• return page는 jsp page

1 2 3 4 5 6 7

@RequestMapping(params="key=sch") public String form02(Board sch,Model d){              d.addAttribute("alllist", service.schBoard(sch));              return "c03_AjaxExp/a02_BoardData"; } Colored by Color Scripter

cs

• return page 부분
• 자체적으로 페이지를 만들어서 그 결과 값을 html data로 return

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<table>     <tr>         <td>no</td>         <td>title</td>         <td>content</td>         <td>writer</td>         <td>regdte</td>         <td>updte</td>         <td>refno</td>         <td>readcnt</td>     </tr>         <c:forEach var = "list" items="${alllist}">             <tr  name="goDetail">                 <td>${list.no}</td>                 <td>${list.title}</td>                 <td>${list.content}</td>                 <td>${list.writer}</td>                 <td>${list.regdte}</td>                 <td>${list.updte}</td>                 <td>${list.refno}</td>                 <td>${list.readcnt}</td>             </tr>         </c:forEach> </table> Colored by Color Scripter

cs

 

 

출처 : eversong0723.blogspot.com/2015/12/ajax-1.html