使用Spring MVC和Ajax处理对象列表

Question

using AJAX and spring MVC , How to return List of objects from Spring Controller and using Jquery display them .

making Ajax request below:

$.ajax({
                    type: "POST",
                    url: "allUser.html",
                    dataType:'json',

                    data: "select=" + selectedCheckboxArray,
                    success: function(data){
                        var userListContent="";
                         var json =data.message;
                        $.each(json, function(i, obj) {


                            userListContent=userListContent+"<tr>";
                            userListContent=userListContent+"<td><input type='checkbox' value='"+obj.id+"'  id='select' name='select'/></td> ";
                            userListContent=userListContent+"<td id='NameColumn'>"+obj.firstName+" "+obj.lastName +"</td>";
                            userListContent=userListContent+"<td id='genderColumn'>"+ obj.gender +"</td>";
                            userListContent=userListContent+"<td id='userNameColumn'>"+ obj.userName +" </td>";
                            userListContent=userListContent+"<td id='userTypeColumn'> "+ obj.userType +"</td>";
                            userListContent=userListContent+"<td id='statusColumn'>"+ obj.status +"</td>";
                            userListContent=userListContent+"<td id='emailIdColumn'>"+ obj.emailId +"</td>";
                            userListContent=userListContent+"<td id='addressColumn'>"+ obj.address +"</td>";
                            userListContent=userListContent+"<td id='contactnoColumn'>"+ obj.contactNo +"</td>";
                            userListContent=userListContent+"</tr>";

                            });

                        $('#rounded-corner tbody').html(userListContent);

                        //console.log(userListContent);



                    },
                    error: function(e){


                    alert('Error: ' + e.responseText);
                    }
                    });

MVC Contrller

 @RequestMapping(value="/deleteUser",method= RequestMethod.POST)
     public @ResponseBody Map<String, Object> deleteUser(UserDetails user,HttpServletRequest request,HttpServletResponse response )throws ServletException,IOException
     {
         System.out.println("Ajax Request Received for delete User...............");
         Map<String, Object> model = new HashMap<String, Object>(); 

      JsonResponse js=new JsonResponse();
      js.setResult("pass");
      js.setStatus("active");
    // String operation=request.getParameter("operation");
     String[] selectedUserIdParameter = request.getParameterValues("select");
    System.out.println("Length:"+selectedUserIdParameter.length);
     /* Code Description:
      * Array "selectedUserIdParameter" above  has ID like {1,2,3,.....}, 
      * we need to use  array like {1 2 3 4 } without (,).so first we must convert.
      * Following code doing the same.
      * After Conversion Array  "selectedUserId" will have ID like {1 2 3 4 }
      * If You Know PHP explode()" function ,following is doing something like what explode() function does .
      */


     String msg="hello";
     List<UserDetails> usersList = userService.getAllUser();
     int no=usersList.size();
     System.out.println("Size:"+no);
     model.put("message", usersList);
     model.put("jso", js);

     return model;

 }

Answer 1

You are going to accept and return objects in the form of JSON, so add the jackson mapper bean in spring dispatcher servlet xml. Jackson mapper does it all. You don't need to do mapping or conversion manually.

<beans:bean id="jacksonMessageChanger"  class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
    <beans:property name="supportedMediaTypes" value="application/json" />
</beans:bean>

<beans:bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
    <beans:property name="messageConverters">
        <util:list id="beanList">
            <beans:ref bean="jacksonMessageChanger" />
        </util:list>
    </beans:property>
</beans:bean>

Now your controller would be like this :

@RequestMapping(value = "/deleteUser", method = RequestMethod.POST)
public @ResponseBody
List<UserDetails> deleteUser(@RequestBody UserDetails userDetails) {
    // fetch the userid to be deleted from the userDetails
    // remebmer the id of user to be deleted will be set in the ajax call

    userService.deleteUser(userDetails.getUserId());

    // again populate the user list to display on page
    List<UserDetails> userList = userService.getAllUser();

    return userList;
}

Now you ajax call will be something like this :

function deleteUser() {
    // set variables into javascript object which you need to send to spring controller
    // the variable name here should be same as it is in your java class UserDetails.java

    var user = new Object();
    user.userId = 120; // id of user to be deleted

    $.ajax({
        type : 'POST',
        url : '/${your project context path here}/deleteUser',
        dataType : 'json',
        data : JSON.stringify(user),
        contentType : 'application/json',
        success : function(data) {
           //here in data variable, you will get list of all users sent from 
           // spring controller in json format, currently its object
           // iterate it and show users on page

           showUsers(data);
        },
        error : function() {
            alert('error');
        }
    });
}

function showUsers(data) {
    // and here you show users on page
    //following code just example

    $('#allUsers').append("<option value='-1'>Select User</option>");
        for ( var i = 0, len = data.length; i < len; ++i) {
            var user = data[i];
            $('#allUsers').append("<option value=\"" + user.userId + "\">" + user.userName+ "</option>");
    }
}

This will work.

Answer 2

Returning the ArrayList directly should work...

@RequestMapping(value="/deleteUser",method= RequestMethod.POST)
     public @ResponseBody ArrayList<UserDetails> deleteUser(UserDetails user,HttpServletRequest request,HttpServletResponse response )throws ServletException,IOException
     {
         System.out.println("Ajax Request Received for delete User...............");


    // String operation=request.getParameter("operation");
     String[] selectedUserIdParameter = request.getParameterValues("select");
    System.out.println("Length:"+selectedUserIdParameter.length);
     /* Code Description:
      * Array "selectedUserIdParameter" above  has ID like {1,2,3,.....}, 
      * we need to use  array like {1 2 3 4 } without (,).so first we must convert.
      * Following code doing the same.
      * After Conversion Array  "selectedUserId" will have ID like {1 2 3 4 }
      * If You Know PHP explode()" function ,following is doing something like what explode() function does .
      */


     String msg="hello";
     List<UserDetails> usersList = userService.getAllUser();
     int no=usersList.size();
     System.out.println("Size:"+no);

     return usersList;

 }

Answer 3

This might be too late now, but just to show you how to call an action through spring by using jQuery Ajax I provide here whatever I had done in my project : (Ajax call For user validation)

Ajax function to be written in *.js file :

function validateUserBeforeCreatingUser(email){ 
    var url='validateUser.htm?'&email='+email;
    $.ajax({
        url: url,
        cache: false,
        success: function(response){
            $("#errors").html(jQuery.trim(response));
            //if errors not present
            if(jQuery.trim(response)==''){
                createUser();
            }
        },
        error: function(response){
        }
    });
}

And this is the action I wrote in controller : (I had created errors.jsp page for rendering errors)

public ModelAndView validateUser(HttpServletRequest request,
        HttpServletResponse response) throws Exception {

    /* write code to validate user, 
                 if user with specified email not found 
                      then create error 
                 else
                     keep errors page blank
            */                

    return new ModelAndView("partial", "errors", errors);
}

Hope this provides you the answer and sorry for indentation, I can't do t properly :-(