How to call a controller from JS so the controller can perform its request mappings?

Question

i'm trying to have a JavaScript file call a JavaSpring MVC Controller, then the controller will perform its request mapping functions.

I'm not sure if it is also possible to pass a variable to the controller so it can know which specific mapping to perform. IF one could demonstrate how to do both that would be immensely helpful. If one can simply show me how to call a controller via JS that would be very helpful as well and answer the question.

my controller will look similar to the following:

@Controller
@RequestMapping(value = "/waterquality/scale")
public class NmWaidsController {
    @RequestMapping(value = {"","/"})
    public String homePageWaids(){
        return "waterquality/scale/calmix";
    }

I would like the JS to call this controller.

If possible I would like to do the following, and have the JS pass a variable to the method which would look like the following:

@Controller
@RequestMapping(value = "/waterquality/scale")
public class NmWaidsController {
    @RequestMapping(value = {"","/"})
    public String homePageWaids(int viewChoice){
        switch(viewChoice){
             case 1:
                 return "waterquality/scale/calmix";
                 break;
             case 2:
                 return "waterquality/scale/caloddo";
                 break;
             case 3:
                 return "waterquality/scale/calstiff";
                 break;
             default:
                 return error;
                 break;
    }

Any help would be much appreciated! Thanks in advance!

Solution

Here's an example that you are looking for.

@RequestParam will help you out.

First, JSON object.

var loginData = { 
       memberId : "test1",
       memberPw : "test2"
}

Second, Ajax.

 $.ajax({
        type: "POST",
        url: "YouActionName",
        data: loginData,
        success: function (result) {
            // do something.
        },
        error: function (result) {
            // do something.
        }
    });

And finally, your controller. Remember the RequestParam's key names must be matched with the JSON's member key names. It's case sensitive, so be careful.

@RequestMapping("/YourActionName")
public String YourActionName(@RequestParam("memberId") String id, @RequestParam("memberPw") String pw ){
  return new ModelAndView("ExpectedReturnView");
} 

---

attaching event listner is really simple.

if you have html like this...

<div id="exampleDiv"></div>

Then using basic id selector, you can attach an event like this below...

$('#exampleDiv').click(function(e) {
    // do what you want when click this element.
});

Comments

[Jared Smith]

This seems perfect! Thanks a ton! A few questions, if I don't want this function to do nothing but call the controller, is the success and error functions needed? Also to use ajax, do i need to include anything in my pom.xml file (maven file to grab needed libraries)? I'm using spring STS IDE, if that helps at all.

[Jared Smith]

Also, do i need to name the $.ajax anything so the it be called from a button? From what I can tell, it will be the $.ajax that calls the controller using data? I just don't see how. Sorry for the hassle and thanks immensely for the help!

[Paris Tao]

Of course you should implement success-failure callback for Ajax, otherwise how do you handle error if connection failed? You don't need to add extra dependency in pom, but you need to include jQuery if want to user $.Ajax.

[Jared Smith]

Awesome, that makes sense, I thought so I just wanted to make sure. Thanks for the feedback

[hina10531]

If you want to fire the event by button or certain ui element on the browser screen, then surely click event will be the best option for you. Using jQuery, you can attach event listener on target DOM very easily.

[Jared Smith]

Cool, thanks! I very much appreciate you taking the time to help me out. I know your busy and your time is valuable, but if you have time, can you please provide an example using jQuery attaching an event listener on the target DOM? I would very much appreciate it!

[Jared Smith]

If you could relate the example to what I have above, that would be even more helpful! Basically All i want is, when a button is clicked it calls the controller passing the variable needed to know which view to request. Again you're awesome, and thanks a ton for the help

[hina10531]

I updated my answer. If you are new to jQuery, api.jquery.com look at the examples. It will help you improve jQuery skill.

[Admin]

Hope You can understand the flow Could you please elaborate on this flow in your answer? In that way this answer might be useful for users unable to understand the flow you are mentioning.