403 Forbidden Error on Spring Ajax GET Request

Question

Well basically just trying to implement some ajax into my spring web application. For testing purposes I have tried writing some code just to retrieve 'user' information based on their personal 'id' values when they press a link/button. I am assuming that it is a Server side error, that something is wrong with my controller, although I am not entirely sure and need help getting this to work. This is my current JSP page just for testing:

<c:forEach var="user" items="${users}">
        <tr>
            <td><c:out value="${user.id}" /></td>
            <td><c:out value="${user.name}"/></td>
            <td><c:out value="${user.username}"/></td>
            <td><c:out value="${user.email}"/></td>
            <td><c:out value="${user.dob}"/></td>
            <td><c:out value="${user.authority}"/></td>
            <td>
                <a class="update" href="<c:url value="/viewUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Update</button></a>
            </td>
            <td>
                <a class="delete" href="<c:url value="/deleteUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Delete</button></a>
            </td>
            <td>
                <a class="ajax" href="<c:url value="/ajax"><c:param name="id" value="${user.id}"/></c:url>">Ajax</a>
            </td>
        </tr>
    </c:forEach>
</table>

<script type="text/javascript">
    $(document).ready(function(){
        $('.ajax').click(function(e){
            e.preventDefault();
            $.ajax({
                url:"http://localhost:8080/SDP_v1.7/ajax",
                type: 'GET',
                dataType:'json',
                contentType: 'application/json',
                mimeType: 'application/json',
                succes: function(user){
                    alert(user.id + " + " + user.username);
                },
                error:function(user,status,er) { 
                    alert("error: "+user+" status: "+status+" er:"+er);
                }
            });
        });
    });
</script>

This is my Controller class:

@RequestMapping("/viewUser")
public String updateUser(Model model, @RequestParam(value = "id", required = false) Integer id) {

    User user = usersService.getUser(id);

    model.addAttribute("user", user);

    return "settings";
}

@RequestMapping(value = "/ajax", method = RequestMethod.GET)
public @ResponseBody User getUser(@PathVariable Integer id) {
    return usersService.getUser(id);
}

This is my error popping up in the console:

GET http://localhost:8080/SDP_v1.7/ajax 403 (Forbidden) jquery.js:5

send jquery.js:5 x.extend.ajax jquery.js:5 (anonymous function) users:106 x.event.dispatch jquery.js:4 v.handle

Essentially, I aiming to loading each user's information into a pop-up modal with a form. Although I have to get this step working first. Thanks

Answer 1

Are you coming from a webserver on port 80? If so, then you are dealing with cross-site scripting issues since being on different ports still counts. You may want to look at JSONP with jQuery .

Edit: Here is a tutorial.

Answer 2

First your controller is wrong, your mapping doesn't include a path variable, so what should it map to?

@RequestMapping(value = "/ajax/{id}", method = RequestMethod.GET)
public @ResponseBody User getUser(@PathVariable Integer id) {
    return usersService.getUser(id);
}

Second your request is wrong as you are calling /ajax whereas you should be calling something like /ajax/<userid> else the controller can never know which user you want.

<script type="text/javascript">
    $(document).ready(function(){
        $('.ajax').click(function(e){
            var url = $(this).attr("href");
            e.preventDefault();
            $.ajax({
                url: url,
                type: 'GET',
                dataType:'json',
                contentType: 'application/json',
                mimeType: 'application/json',
                succes: function(user){
                    alert(user.id + " + " + user.username);
                },
                error:function(user,status,er) { 
                    alert("error: "+user+" status: "+status+" er:"+er);
                }
            });
        });
    });
</script>

Third your jsp is wrong as it will generate a URL without the id (no path variable but a request parameter). Use <spring:url ../> for ease of use.

<a class="ajax" href="<spring:url value="/ajax/{id}"><spring:param name="id" value="${user.id}"/></spring:url>">Ajax</a>

I strongly suggest a read of the Spring Reference Guide , the web chapter should shed light on the matter. It shouldn't matter if the call is made through AJAX or not, first fix your mappings, then add AJAX.

Answer 3

succes: function(user){
                alert(user.id + " + " + user.username);
            },

maybe its SUCCESS instead of succes