How To Reload A Specfic Part Of A Jsp With A New Model Over Ajax (spring Mvc)?

What am I using? Tomcat 7.0.56 JAVA 1.8 Spring MVC jQuery What is the goal? I'm implementing a content directory. The user searches for a specific name or phone number for exam

Solution 1:

Taking a look to your ajax request I think you are trying to send a json object (but you are not, really) and then your are trying to get the value for the id with @RequestParam instead of @RequestBody.

If you do not want to send a json object in the ajax payload, then your content-type is wrong. Try something like this. The data property is going to be is converted to a query string by jQuery.

$(document).ready(function(){
  $(".overViewListEmployee").click(function () {
    var id = $(this).find(".overViewEmployeeID").text();
    console.log("Works: " + id + ".");
    $.ajax({
        type: "POST",
        headers: {
            "Accept" : "text/html",
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        },
        url: "/refreshDetail",
        //you can get rid of data if you change your url to "/refreshDatil?id="+iddata: {"id" : id},
        success: function(response) {
            $(".containerDetailView").html(response);
        }
    });
  });
});

If you really want to send a json object, as I have already said on my comments, you need do some changes at your controller level.

---

Edit

Ok, you are now mixing the two possible solutions. With your current ajax object you are not sending a json object, but a normal http request. You can check the network tab at your browser when the ajax request happend and you will see a request like /refreshDetail?id=yourid, without json object in the paylod.

Your controller, on the other hand, using @RequestBody is trying to get an object like IdObject from the payload, but your are not doing a request like that. Your controller should looks like:

@RequestMapping(value = "/refreshDetail", method = RequestMethod.POST, produces = MediaType.TEXT_HTML_VALUE)
private ModelAndView refreshDetailView(HttpServletRequest hsr, @RequestParam int id, ModelMap model){
    model.addAttribute("detailSearchResult", Dao.getDetailViewData(id));
    returnnewModelAndView("detailView", model);
}

Also remove the brackets from the data property at your ajax object:

$(".overViewListEmployee").click(function () {
    var id = parseInt($(this).find(".overViewEmployeeID").text());
    console.log("Works: " + id + ".");
    $.ajax({
        type: "POST",
        accept:"text/html",
        //contentType: "application/json; charset=utf-8",dataType: "html",
        url: "/refreshDetail",
        data: {"id": id},
        success: function(response) {
            $(".containerDetailView").html(response);
        }
    });
});

In case you want to send a json payload If what you really need is send a json object from javascript then you need to change your ajax request

$(".overViewListEmployee").click(function () {
    var id = parseInt($(this).find(".overViewEmployeeID").text());
    console.log("Works: " + id + ".");
    $.ajax({
        type: "POST",
        accept:"text/html",
        dataType: "html",
        contentType: "application/json",
        url: "/refreshDetail",
        data: JSON.stringify({"id": id}),
        success: function(response) {
            $(".containerDetailView").html(response);
        }
    });
});

With contentType jQuery is setting the header Content-Type, telling your controller the request is coming with a json payload. Then, JSON.stringify is converting the javascript object with the info to be send into a json string and it will be used by jQuery as payload.

On the backend side, your controller, now, should use @RequestBody because the info is not coming within the request parameters, but a json payload. So, it should looks like something to this:

@RequestMapping(value = "/refreshDetail", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.TEXT_HTML_VALUE)
    private ModelAndView refreshDetailView(HttpServletRequest hsr, @RequestBody IdObject id, ModelMap model){
        model.addAttribute("detailSearchResult", Dao.getDetailViewData(id.getId()));
        returnnewModelAndView("detailView", model);
    }

The consumes property at the request mapping, in this case, is not mandatory, as you do not have any other mapping to the same value /refreshDetail, but it makes the code easier to read.

You do not have to use @ResponseBody at your controller, on any of this cases, because you are sending back a view. You will use it when sending back a json, xml, etc.