버튼 클릭시 페이지 일부 새로 고침, 새 URL에서 전체 페이지 새로 고침

Zwiebl

단일 페이지 Spring MVC애플리케이션을 작성 중 입니다.

요구 사항 :

  1. 입력 한 URL에 따라 페이지 상태를 변경하고 싶습니다.
  2. 버튼 클릭으로 페이지 상태를 변경하고 싶습니다.

사용 사례 예 :

  1. URL "my.site.com/"을 입력하면 내 사이트 스켈레톤 만로드되고 User. ( User내 모델의 개체입니다).

  2. URL "my.site.com/users/John"을 입력하면 "John"에 대한 데이터가 표시되기를 원합니다 ( 페이지를 다시로드 할 수 있음 ).

  3. 나는에 문자열 "존"을 입력하면 textbox, 그리고 히트 버튼을 Go!, 나는 사용자 데이터를 표시하는 페이지의 일부가되고 싶지 갱신하지 전체 페이지를 다시로드 .

디자인 질문 :

나는 1)2)ModelAndView객체 를 반환해야하고 3) 사용할 수 있다는 것을 이해합니다 AJAX. 이것은 아마도 세 가지 컨트롤러 메서드가 필요하다는 것을 의미합니다.

내가 모르는 것은 MVC와 AJAX 컨트롤러 메서드 사이의 충돌 URL 을 피하는 방법과 AJAX컨트롤러 메서드가 아닌 Javascript에서 실제로 컨트롤러 메서드 를 호출 ModelAndView하는 방법입니다.

코드 예 :

내가 필요한 것은 물론 이것이 충돌하는 URL을 유발한다는 점을 제외하면 이와 같은 것입니다 .

/*
 * Default view.
 */
@RequestMapping(value = "/users")
public ModelAndView displayDefault() {

    return new ModelAndView("userdisplay_default.jsp");
}

/*
 * View for a specific user.
 */
@RequestMapping(value = "/users/{username}")
public ModelAndView displaySpecific(@PathVariable(value = "username") String username) {
    User user = new User(username);

    return new ModelAndView("userdisplay_specific.jsp", "Specific User", user);
}

/*
 * AJAX controller method.
 */
@RequestMapping(value = "/users/{username}", produces = "application/json", method = RequestMethod.GET)
public @ResponseBody User getTime(@PathVariable(value = "username") String username) {
    return new User(username);
}

Javascript에서 다음 POJO과 같이 가져옵니다 .

// obtain user
var user = $('#user_input').val(); // this is a text input

$.getJSON("/users/"+user, function() {
    //...
});

참고 : 이를 달성하려는 내 방식은 잘못 될 수 있습니다. // 불충분하고 // 최적이 아니므로이를 수행하는 방법에 대한 다른 방법도 자유롭게 제안 해주세요.

필요한 작업을 어떻게 수행해야하는지 코드 예제와 함께 설명해 주시겠습니까?

Optio

컨트롤러에 대해 다른 방법을 만들 수 있습니다. 예 : @RequestMapping(value = "/users")and @RequestMapping(value = "/users/{username}")-GET 메소드가 있습니다. 그러나 AJAX의 경우 POST로 컨트롤러를 만듭니다.

@RequestMapping(value = "/users/{username}", produces = "application/json", method = RequestMethod.POST)

그리고 JS는 다음과 같습니다.

// Send the request
$.post("/users/"+user, data, function(response) {
    // Do something with the request
});

다른 조언 (가능한 경우)-나머지를 위해 url의 이름을 변경하십시오. api를 들어 URL 에 단어 추가 합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

버튼 클릭시 페이지 새로 고침 방지

분류에서Dev

링크 버튼 클릭시 페이지 새로 고침 방지

분류에서Dev

Flask에서 페이지 새로 고침시 라디오 버튼 값 전달

분류에서Dev

버튼 onclick 새로 고침 페이지

분류에서Dev

링크 버튼 클릭 후 페이지 새로 고침 필요

분류에서Dev

뒤로 버튼의 온천 UI에서 이전 페이지 새로 고침

분류에서Dev

제출 버튼 클릭시 내 jsp 페이지 새로 고침 방지

분류에서Dev

페이지 새로 고침시 버튼 클릭 이벤트 발생

분류에서Dev

클릭시 양식 버튼 새로 고침-한 페이지 웹 사이트

분류에서Dev

CKEDITOR-툴바의 '저장'버튼 클릭시 페이지 새로 고침 방지 및 자체 기능 호출

분류에서Dev

첫 번째 라디오 버튼에서 페이지 새로 고침을 클릭하십시오.

분류에서Dev

페이지 새로 고침이 아닌 버튼 클릭시에만 양식 제출

분류에서Dev

버튼을 클릭하면 Ajax가로드 된 페이지 새로 고침

분류에서Dev

버튼을 클릭하면 Ajax가로드 된 페이지 새로 고침

분류에서Dev

UI 이벤트 (예 : 버튼 클릭) 후 페이지 새로 고침 이벤트 발생 여부 확인 방법

분류에서Dev

제출 버튼을 클릭하면 웹 페이지 새로 고침

분류에서Dev

angularJS에서 페이지 새로 고침시 이미지 변경

분류에서Dev

다음 또는 이전 버튼을 클릭하는 동안 여러 번 페이지 새로 고침

분류에서Dev

다음 또는 이전 버튼을 클릭하는 동안 여러 번 페이지 새로 고침

분류에서Dev

Yii Captcha에 새로 고침 버튼이 표시되지 않음

분류에서Dev

페이지 새로 고침없이 JS 파일 다시로드

분류에서Dev

React에서 제출시 페이지 새로 고침 방지

분류에서Dev

페이지 새로 고침시 목록 전환 상태 유지

분류에서Dev

페이지 새로 고침 또는 버튼 클릭 이벤트시 텍스트 상자를 지우지 않음

분류에서Dev

<router-link> 클릭시 Vuejs 및 페이지 새로 고침

분류에서Dev

AngularJs에서 부분 페이지 콘텐츠 새로 고침

분류에서Dev

pdfnet : 단일 페이지 회전 후 새로 고침 없음

분류에서Dev

뒤로 버튼의 history.js 페이지 새로 고침

분류에서Dev

일부 테스트에서 전체 페이지를 새로 고침했습니다.

Related 관련 기사

  1. 1

    버튼 클릭시 페이지 새로 고침 방지

  2. 2

    링크 버튼 클릭시 페이지 새로 고침 방지

  3. 3

    Flask에서 페이지 새로 고침시 라디오 버튼 값 전달

  4. 4

    버튼 onclick 새로 고침 페이지

  5. 5

    링크 버튼 클릭 후 페이지 새로 고침 필요

  6. 6

    뒤로 버튼의 온천 UI에서 이전 페이지 새로 고침

  7. 7

    제출 버튼 클릭시 내 jsp 페이지 새로 고침 방지

  8. 8

    페이지 새로 고침시 버튼 클릭 이벤트 발생

  9. 9

    클릭시 양식 버튼 새로 고침-한 페이지 웹 사이트

  10. 10

    CKEDITOR-툴바의 '저장'버튼 클릭시 페이지 새로 고침 방지 및 자체 기능 호출

  11. 11

    첫 번째 라디오 버튼에서 페이지 새로 고침을 클릭하십시오.

  12. 12

    페이지 새로 고침이 아닌 버튼 클릭시에만 양식 제출

  13. 13

    버튼을 클릭하면 Ajax가로드 된 페이지 새로 고침

  14. 14

    버튼을 클릭하면 Ajax가로드 된 페이지 새로 고침

  15. 15

    UI 이벤트 (예 : 버튼 클릭) 후 페이지 새로 고침 이벤트 발생 여부 확인 방법

  16. 16

    제출 버튼을 클릭하면 웹 페이지 새로 고침

  17. 17

    angularJS에서 페이지 새로 고침시 이미지 변경

  18. 18

    다음 또는 이전 버튼을 클릭하는 동안 여러 번 페이지 새로 고침

  19. 19

    다음 또는 이전 버튼을 클릭하는 동안 여러 번 페이지 새로 고침

  20. 20

    Yii Captcha에 새로 고침 버튼이 표시되지 않음

  21. 21

    페이지 새로 고침없이 JS 파일 다시로드

  22. 22

    React에서 제출시 페이지 새로 고침 방지

  23. 23

    페이지 새로 고침시 목록 전환 상태 유지

  24. 24

    페이지 새로 고침 또는 버튼 클릭 이벤트시 텍스트 상자를 지우지 않음

  25. 25

    <router-link> 클릭시 Vuejs 및 페이지 새로 고침

  26. 26

    AngularJs에서 부분 페이지 콘텐츠 새로 고침

  27. 27

    pdfnet : 단일 페이지 회전 후 새로 고침 없음

  28. 28

    뒤로 버튼의 history.js 페이지 새로 고침

  29. 29

    일부 테스트에서 전체 페이지를 새로 고침했습니다.

뜨겁다태그

보관