How to return an object from a Spring MVC controller in response to AJAX request?

56,861

Solution 1

I need this list of employee in ajax

In spring when you need object serialization, de-serialization and message conversion. in that case you need to annotate your controller handler method with @RequestBody and @ResponseBody.

Where:

  • @ResponseBody : will inform spring that try to convert its return value and write it to the http response automatically.
  • @RequestBody : will inform spring that try to convert the content of the incoming request body to your parameter object on the fly.

in your case you need JSON type, you have to add @ResponseBody to your method signature or just above the method, and produces and consumes which are optional, like:

@RequestMapping(value="phcheck", method=RequestMethod.GET
                produces="application/json")
public @ResponseBody List<Employee> pay(@RequestParam("empid") int empid, String fdate, String tdate) {

  //get your employee list here
  return empList;
}

and in AJAX call use:

  • contentType: 'application/json' attribute tells the type of data you're sending. and
  • dataType: json attribute tells jquery what content type of response will receive.

in your case contentType: 'application/json' is not needed, default one i.e. 'application/x-www-form-urlencoded; charset=UTF-8' is enough.

and you can receive list of employees in your AJAX success, to iterate over it do like:

  success: function (data) {
          $.each(data, function(index, currEmp) {
             console.log(currEmp.name); //to print name of employee
         });    
        },


Note: Jackson mapper or any other mapper should be available on buildpath in order to work JSON serialize and deserialize.

See Also:

Solution 2

The ModelAndView implies you plan to render a view, which you don't. To just return the object, use the @ResponseBody annotation:

@RequestMapping("phcheck")
public @ResponseBody List<Employee> pay(@RequestParam("empid") int empid, String fdate, String tdate) {
   return entityManager.createQuery("select e from Employee e where e.empId="+empid, Employee.class).getResultList();
}

Also, you should be more careful about how you handle queries. Your query is insecure and would allow sql injection. For example, if someone called your method with empId = "'15' or '1'='1'", then it would return the entire list of employees.

Solution 3

@RequestMapping(value = "phcheck", produces = "application/json")
@ResponseBody
public ModelAndView pay(@RequestParam("empid") int empid, @RequestParam("fdate") String fdate, @RequestParam("tdate") String tdate) {

   return entityManager.createQuery("select e from Employee e where e.empId="+empid, Employee.class).getResultList();
}


url:"phcheck.htm?empid="+$("#empid").val()+"&fdate="+$("#fdate").val()+"&tdate="+$("#tdate").val()

In Spring MVC you will have to have registered MappingJackson2HttpMessageConverter like being done here

Share:
56,861
Gorakh
Author by

Gorakh

Updated on May 31, 2020

Comments

  • Gorakh
    Gorakh almost 4 years

    I have to return a list of employees from a controller in response to jQuery AJAX request. How should I do for it?

    My controller:

    @RequestMapping("phcheck")
    public ModelAndView pay(@RequestParam("empid") int empid, String fdate, String tdate) {
        ModelAndView mav = new ModelAndView("phcheck");
        List<Employee> employees = entityManager.createQuery(
            "SELECT e FROM Employee e WHERE e.empId = " + empid, Employee.class)
            .getResultList();
        mav.addObject("employees", employees); // I need this list of employee in AJAX
    
        return mav;
    }
    


    AJAX code in the related view:

    $(document).ready(function () {
        $("#empid").change(function () {
            if ($("#fdate").val() != "" && $("#tdate").val() != "" && $("#empid").val() != "") {
                jQuery.ajax({
                    url: "phcheck.htm?empid=" + $("#empid").val() +
                                     "&&fdate=" + $("#fdate").val() +
                                     "&&tdate=" + $("#tdate").val(),
                    success: function (data) {
                        alert(data + "success");
                    },
                    error: function (data) {
                        alert(data + "error");
                    }
                });
            } else {
                alert("Please fill the from date and to date or select the employee id");
                $("#empid .option").attr("selected", "selected");
            }
        });
    });
    


    Thanks in advance.