CODEWITHSUNDEEP
javascripthtmlajaxjspspring-mvc
zwiebl
zwiebl

Reputation: 725

Reload part of the page on button click, Refresh whole page on new URL

I am writing a single page Spring MVC application.

Requirements:

  1. I want it to change the state of the page according to the URL that is entered.
  2. I want it to change the state of the page on a click of a button.

Example use cases:

  1. If I enter a URL "my.site.com/", I want only my site skeleton to be loaded, with no data for the User. (User is an object in my model).

  2. If I enter a URL "my.site.com/users/John", I want the data for "John" to be displayed (the page can be reloaded).

  3. If I enter string "John" in a textbox, and hit button Go!, I want only the part of the page displaying user data to be refreshed and not the whole page reloaded.

Design Question:

I understand that for 1) and 2) I would need to return a new ModelAndView object, and for 3) I could use AJAX. This probably implies I would need three controller methods.

What I don't know is how to avoid conflicting URLs between the MVC and AJAX controller methods, and how to actually then call my AJAX controller method from Javascript, and not the ModelAndView controller method.

Code Example:

What I would need is something like this, except that this, of course, causes conflicting URLs.

/*
 * 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);
}

In Javascript I would then fetch the POJO like this:

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

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

NOTE: My way of trying to achieve that could be wrong // insufficient // not optimal, so please feel free to also suggest some other way on how to do that.

Could you please give me an explanation along with a code example how what I need should be accomplished?

Upvotes: 1

Views: 1505

Answers (1)

Optio
Optio

Reputation: 7642

You can make different methods for your controllers. For example: @RequestMapping(value = "/users") and @RequestMapping(value = "/users/{username}") - there are GET methods. But for AJAX make controller with POST:

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

And JS will be smth like this:

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

Another advice (if it's possible in your situation) - rename url for your rest. E.g. add word api into the url.

Upvotes: 1

Related Questions