2012-10-30 1 views
3

AJAX를 처음 사용하며 현재 Spring MVC에서 사용하는 방법을 배우고 있습니다. 나는 같은 문제에 직면하고있다.

실제 실시간 요구 사항을 진행하기 전에 전체 AJAX + Spring MVC + jquery 조합을 실제로 이해하는 데 필요한 기본 기능과 함께 테스트하고 있습니다.

페이지에 검색 창 + 제출 버튼이 있습니다. 나는 $ .get을 사용하여 제출할 때 스프링 컨트롤러에 하드 코딩 된 텍스트를 보내고있다. 그런 다음 해당 컨트롤러에서 콜백 함수로 다른 텍스트를 보내고 'alert'상자를 사용하여 콜백 함수에 반환 된 텍스트를 표시하려고합니다. 이것은 효과가없는 것 같습니다.

콜백 함수가 호출되고있는 것을 봅니다. (콜백 함수의 'alert'이 실행되고 있기 때문에) 컨트롤이 컨트롤러로 전달되고 콜백 메소드로 되돌아 가고 있다고 가정합니다. 컨트롤러에서 반환 된 텍스트가 콜백 메서드의 경고 상자에 표시되지 않는 이유를 파악할 수 없습니다. 콜백 메서드에서 반환 값을 캡처하기 위해 여기에 누락 된 내용이 무엇인지 모르겠습니다.

귀하의 답변과 도움에 감사드립니다.

감사합니다.

텍스트 상자 HTML 제출 버튼 : 위의 양식의 제출에 트리거

<div class = "searchcontactform"> 
     <form id = "searchcontactform" name="searchcontactform" method="GET"> 
     <input type = 'text' size='25' name = "searchlastname" id = "searchlastname" value='Enter Last Name to Search'/> 
     <input type = "submit" value="Find"> 
     </form> 
    </div> 

자바 스크립트 :

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/scripts/jquery.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
    $('#searchcontactform').submit(function(){ 

     $.get("ContactList-JPA/search", {textsent : 'Hello Controller'},callback); 

     function callback(textreceived){ 
       alert('In Callback. Text Received is: '+textreceived); 
     }; 
    }); 
    }); 

컨트롤러 :

 @RequestMapping(value = "/search", method = RequestMethod.GET) 
     public @ResponseBody String searchcontact(@RequestParam(value="textsent") String textsent){ 
     return textsent; 
     } 

POM 잭슨 종속성. xml :

서블릿-context.xml에 뿌리-context.xml에 구동

주석 : 당신은 설정 당신을 또한 수

$(document).ready(function() { 
    $('#searchcontactform').submit(function(){ 

     $.get("ContactList-JPA/search", {textsent : 'Hello Controller'}, 
      function(data){ 
       callback(data); 
     }); 

     function callback(textreceived){ 
      alert('In Callback. Text Received is: '+textreceived); 
     }; 
    }); 
}); 

:

<!-- Enables the Spring MVC @Controller programming model --> 
    <annotation-driven /> 

답변

3

는 우선,이, 당신의 자바 스크립트 응용 프로그램을 디버깅 할 수있는 구글 크롬을 사용해보십시오 작업 콜백 내부에 중단 점을 넣어하지 않는 경우 이벤트 핸들러에게

$('#searchcontactform').submit(function(){ 

     $.get("ContactList-JPA/search", 
     { 
      textsent : 'Hello Controller' 
     }, 
     function(textreceived){ 
       alert('In Callback. Text Received is: '+textreceived); 
     }); 
     return false; 
    }); 

제출의 마지막에 return false를 넣어 $.get 라인

+1

'return false'가 기본 submit을 막을 것이다. 행동 – melanke

+1

이것은 효과가 있었다!. 'return false;'를 추가합니다. 제출 이벤트 핸들러의 마지막 부분에서 내 문제가 해결되었습니다. 답장을 보내 주셔서 감사합니다. 대단히 감사합니다. –

0

데이터를 전달하는 시도는 매개 변수로 콜백 반환 콜백 함수는 익명으로 함수를 정리합니다.

$(document).ready(function() { 
    $('#searchcontactform').submit(function(){ 

     $.get("ContactList-JPA/search", {textsent : 'Hello Controller'}, 
      function(data){ 
       alert('In Callback. Text Received is: '+data); 
     }); 
    }); 
}); 
+0

아니요, 이것은 문제가되지 않습니다 – melanke

+0

다음은 콜백 메서드가 수신 한 텍스트의 값을 –

+0

으로받는 콜백 함수에 이미 매개 변수가 있습니다. – melanke

1

나는 당신이 타입 String을 돌려 주며 어떤 이유로 Spring/Jackson이 응답으로 변환 할 때 맘에 들지 않는다고 생각한다.

@RequestMapping(value = "/search", method = RequestMethod.GET) 
public @ResponseBody List<String> searchcontact(@RequestParam(value="textsent") String textsent){ 
    return Arrays.asList(new String[] { textsent }); 
} 

그것은 이상적인 아니라 아주 짜증나는 : 당신이 무엇을해야 문제를 해결하려면 다음입니다.나는 이것이 실제로 일어난 이유를 아직 보지 못했다.

업데이트 : 사과 여기 내가 틀렸어. 반환 값이 JSON이 될 것이라고 가정하지 않으므로 컨트롤러를 변경하면 아무런 영향을 미치지 않습니다.