Passing parameter from Javascript to API in Controller

Question

I was having some problem when trying to pass a parameter from jsp to controller. Here is the JavaScript where I call the API in Controller:

function help(value){
    // need to pass the "value" parameter to this following API
    window.open("<c:url value='doWavierGuide.do'/>", 'info', 'width=640,height=480,resizable=yes,scrollbars=yes')
}

And my controller as such:

@RequestMapping(value = "/doWavierGuide.do", method = RequestMethod.GET)
public ModelAndView showWavierGuide() {
    Map<String, Object> modelMap = new HashMap<>();
    
    log.debug("showWavierGuide() : Method is ");
    // need to put the value passed in from javascript into here, temporary hardcoded
    modelMap.put("method", "1");
    
    return new ModelAndView("wavierGuide", modelMap);
}

But I not sure how can I pass the value from JavaScript to Controller. If I hardcoded the parameter value in Controller, the page managed to display. Any ideas? Thanks!

If you want to get all request param, this is the answer https://stackoverflow.com/a/7312897/9184726 — Tung Luong Thanh, Oct 16 '20 at 03:28

score 0 · Accepted Answer · answered Oct 16 '20 at 03:25

I managed to solve it by changing the url in jstl tag like this:

"<c:url value='doWavierGuide.do?method='/>"+value

And in the controller, retrieve the parameter using HttpServletRequest:

@RequestMapping(value = "/doWavierGuide.do", method = RequestMethod.GET)
public ModelAndView showWavierGuide(HttpServletRequest request) {
    Map<String, Object> modelMap = new HashMap<>();
    modelMap.put("method", request.getParameter("method"));
    return new ModelAndView("wavierGuide", modelMap);
}

score 0 · Answer 2 · answered Oct 16 '20 at 03:30

You have to use a library to make http requests to the server, or use fetch to send and receive data. I leave an example:

const cnn = async (path, options) => {
   const url = "www.example.com";
   let result = await fetch(`${url}${path}`,
       options
   );

   if (result.status >= 200 && result.status <= 299) {
       return await result.json();
   }

   return { data: null, error: true } 
}

// request to the API
cnn("doWavierGuide.do", { method: "GET", body: {name: "you_name"} })
  .then(response => response.json())
  .then(response => console.log(response))

Passing parameter from Javascript to API in Controller

2 Answers2