Spring MVC和Ajax

Question

I m trying to write spring mvc application with ajax and jquery and stuck at some point and not able to find solution since last 1 week..please help me out.

i want send request for showing all my users in database using ajax,see how i done

Show User List

now javascript ajax request

function doAjaxPost(id)
{ var submitId=id;
  if(submitId=="showUserList")
  {
        $.ajax({
                type: "POST",

                url: "showUserList.html",
                success: function(response){
                // we have the response

                    if(response!='')
                    {
                        //alert(response);
      //Not getting this                $('#listofUser').html(response);
                         $("#homeDiv").hide();
                     $("#userListDiv").show("5");
                    }                                                      
                },
                error: function(e){
                alert('Error: ' + e);
                }
                });
        }

    }

now see me controller

@RequestMapping(value="/showUserList",method = RequestMethod.POST)
    public @ResponseBody ModelMap showUserList()
    {
        System.out.println("Ajax Request For user List");
        List<UserDetails> userList=service.getAllUser();
        ModelMap model=new ModelMap();
        model.put("users", userList);
        return model;
    }

now see how im displaying the user list on jsp page

---

<div id="listofUser">
<c:if test="${!empty users}">

<table id="rounded-corner" summary="List Of System Users">

    <thead>
        <tr>      
            <th scope="col" class="rounded-select">Select</th>
            <th scope="col" class="rounded-id">ID</th>
            <th scope="col" class="rounded-fname">Name</th>

            <th scope="col" class="rounded-gender">Gender</th>
            <th scope="col" class="rounded-username">UserName</th>
            <!-- <th scope="col" class="rounded-password">Password</th> -->
            <th scope="col" class="rounded-usertype">Type</th>
            <th scope="col" class="rounded-userStatus">Status</th>
            <th scope="col" class="rounded-Email">Email</th>
            <th scope="col" class="rounded-address">Address</th>
            <th scope="col" class="rounded-phno">PhoneNo.</th>
        </tr>
    </thead>
     <form action="adminOperations.html" name="userListForm" onsubmit="return ConfirmOperation();"  method="post">   
    <tbody>

        <c:forEach items="${users}" var="users" varStatus="status">
        <tr>
            <td><input type="checkbox" value="${users.id}" id="select" name="select"/></td>
            <td><c:out value="${users.id}" /></td>
            <td><c:out value="${users.firstName}" />&nbsp;<c:out value="${users.lastName}" /></td>

            <td><c:out value="${users.gender}" /></td>
            <td><c:out value="${users.userName}" /></td>
            <%-- <td><c:out value="${users.userPassword}" /></td> --%>
            <td><c:out value="${users.userType}" /></td>
            <td><c:out value="${users.status}" /></td>
            <td><c:out value="${users.emailId}" /></td>
            <td><c:out value="${users.address}" /></td>

            <td><c:out value="${users.contactNo}" /></td>

        </tr>

    </c:forEach>
    </tbody>
    <tfoot>
        <tr>

            <td colspan="12" class="rounded-foot-center" align="center">

            <input type="submit" name="activate" id="activate" value="Activate" onClick="ButtonClicked(this);">&nbsp;&nbsp;
            <input type="submit" name="deactivate" id="deactivate" value="Deactivate" onClick="ButtonClicked(this);">&nbsp;&nbsp;
            <input type="submit" name="update" id="update" value="Update" onclick="ButtonClicked(this);">
            <input type="submit" name="delete" id="delete" value="Delete" onclick="ButtonClicked(this);">&nbsp;&nbsp;&nbsp;

            </td>
        </tr>
    </tfoot>
    </form> 
</table>

<br/>
</c:if>



<c:if test="${empty users}">

    There are currently no user found.

</c:if>

</div>

....................................................................... what im not getting is , when response come from controller(ModelMap object in my case) how would i pass model containing list of users to my jsp page so that it can display. i tried
$('#listofUser').html(response); but it is not working, i want model containing (model.put("users", userList);) users to be available from javascript to my display part.. please help me out..... thanks and regards, Hemant Singh

Answer 1

i am using spring mvc

 public ModelAndView showUserList(HttpServletRequest request, HttpServletResponse response) throws Exception {
     return new ModelAndView("GiveAnyName","users", userList);
    }

Now you can get User List in JSP Page  

    List rows = (List) request.getAttribute("users");

Answer 2

@ResponseBody doesn't work like that, you should return a JSON and in order to display the content you can do it with jQuery but is a bit tricky, that's why I recommend to you AngularJS, forget JSTL.

Here there is a tutorial where SpringMVC, JSTL and asynchronous requests work together