how to use jquery ajax with spring mvc3

Question

this fnction is when clicked button,

it just insert 1row to database.

insert row is perfectly, but...

problem is always return 'error alert'.

'success alert' is never return.

how to do.

ps. I'm sorry to my english is not good.

$(function(){
    $("[name='replyWrite']").click(function(){
        var text = $("textarea").val();
        $.ajax({
            url: "http://localhost:8080/replyWrite",
            type: "POST",
            data: "no=100&id=test&comment=this is test",
            dataType: "text",
            cache: "false",
            success: function(){
                alert("Success");
                // something to do
            },
            error: function(data, textStatus, errorThrown){
                alert("error\n" + data + ", " + textStatus + ", " + errorThrown);
            }
        });
    });
});

And replyWrite code is..

@RequestMapping(value="/replyWrite")
public String replyWrite(@RequestParam(required=true)int no
                        , @RequestParam(required=true)String id
                        , @RequestParam(required=true)String comment){
    return boardDaoJdbc.replyWrite(id, no, comment);
}



public String replyWrite(String id, int no, String comment){
    // it will be return "1"
    return Integer.toString(this.jdbcTemplate.update("INSERT INTO testz_board_reply(id, comment, linked_idx, write_date) VALUES (?, ?, ?, DATE_FORMAT(now(), '%Y-%c-%d %H:%i')) ",
                            id, comment, no));
}

danny.lesnik · Accepted Answer · 2012-01-03 10:41:56Z

If you are using ajax you need to use @ResponseBody annotation.

so your mapping should be like this:

@RequestMapping(value="/replyWrite", method=RequestMethod.POST)
@ResponseBody
public String replyWrite(@RequestParam(required=true)int no
                        , @RequestParam(required=true)String id
                        , @RequestParam(required=true)String comment){
    return boardDaoJdbc.replyWrite(id, no, comment);
}

Now on my client side:

<script src="../scripts/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#replyWrite").click(function () {
        var text = $("textarea").val();
        var request = "no=100&id=test&comment=this is test",
        $.post("replyWrite", request,
                   function(data) {
                    alert(data);
                   });
        });
      });
</script>

Hope it helps.

Grzegorz Grzybek · Accepted Answer · 2012-01-03 07:44:57Z

0

The problem is probably with your URL: http://localhost:8080/replyWrite. If you've deployed your WAR application under some context path, you should use this context path in URL.

For example - Tomcat has ROOT folder inside webapps - only this "webapp" has empty context path. If your WAR is example.war, your URL should be http://localhost:8080/example/replyWrite.

Common way to handle this problem is to add a little bit of server-side processing to your JavaScript - to generate the URL (instead of hardcoding it).

For example with JSP use:

$.ajax({
    url: "<c:url value="/replyWrite" />",
    ...

regards Grzegorz Grzybek

answered Jan 3, 2012 at 7:44

Grzegorz Grzybek

6,2673 gold badges31 silver badges42 bronze badges

1 Comment

saarthak Over a year ago

what would you do when you putting all your AJAX javascript in separate js files? Will this work?

Collectives™ on Stack Overflow

how to use jquery ajax with spring mvc3

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related