Spring MVC + AJAX Call Not Returning in JQuery Script

Question

I'm trying to implement a very basic AJAX call in my Spring application (Never used AJAX before). For now I'm just trying to make a call that returns a string, and updates a text area in a form. I know the JQuery code is getting invoked no issues as I can debug the sending part in my browser, and the controller is getting the request. I thought the @ResponseBody annotation was somehow supposed to magically return just the contents of the method return value but its like JQuery doesn't "see" it or something. The controller simply returns the string back and the entire html page just shows the string. I cannot hit the SUCCESS portion in debug in the JQuery call. Am I missing something here?

Form (truncated for readability)

<form id="ajaxTaskUpdate" th:action="@{/updateTask}" th:object="${Task}" method="post"> 
     <textarea id="taskDescription" name="taskDescription" class="materialize-textarea blue" th:text="${task.description}" maxlength="250"></textarea>
</form>

Jquery snippet

$('#ajaxTaskUpdate').submit(function(event) {
            $.ajax({
                url : $("#ajaxTaskUpdate").attr("action"),
                data : data,
                type : "POST",
                success : function(response) {
                    //BREAKPOINT NEVER HITS HERE
                    $("#taskDescription").text(response);
                },
                error : function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            });

            return false;
});

Spring Controller

@RequestMapping(value = "/updateTask",  produces = "application/json", method = RequestMethod.POST)
@ResponseBody
public  String updateTask(Task task) {
    //I want this to be "ajaxed" into my form's text area
    return "successful Ajax Response!";
}

GUI after Controller response

Did your ajax call successfully requested to the server? Coz i dont think so — Nur Zico
– Nur Zico, Commented Jun 1, 2017 at 22:46
I'm fairly certain it is, unless the form itself is somehow hitting it or something. I can debug through the Ajax call on the html side, and immediatley after the .ajax line it hits a breakpoint in my controller. — Jason
– Jason, Commented Jun 1, 2017 at 22:48
I think you are actually requesting post by submitting the form to the server. Though the page is refreshed so your ajax request can't get executed. I have to remain to the page to execute any javascript method or event. — Nur Zico
– Nur Zico, Commented Jun 1, 2017 at 22:55
It's fine. You return just string from the controller and the string is shown. Try to return a POJO with fields and see the results. To check JS call set breakpoints to success and error methods and check one of them is hit — StanislavL
– StanislavL, Commented Jun 2, 2017 at 6:08
I believe Zico was on the right track with this one. To sum up exactly what was happening, I was able to debug from the ajax snippet on my client side (html) and it was sending correctly to the server (spring mvc controller). When the controller returned the string it was causing the web browser to refresh, I guess this is default form behavior. I updated my JQuery to include event.preventDefault(); before making the .ajax call and it seems to do the trick. @Zico if you wanna post an actual answer I will gladly accept it to give you credit. Thanks. — Jason
– Jason, Commented Jun 2, 2017 at 13:23

Nur Zico · Accepted Answer · 2017-06-02 17:36:05Z

1

You are actually requesting post by submitting the form to the server. Though the page is refreshed so your ajax request can't get executed. I have to remain to the page to execute any javascript method or event.

You have stop the form submission from html submit button to execute ajax request
Fix the url of ajax like /updateTask or wherever you want
Set dataType as json in ajax
Took Task as @RequestBody in controller
Make the controller consumes=MediaType.APPLICATION_JSON_VALUE
Make the data json string in ajax parameter

answered Jun 2, 2017 at 17:36

Nur Zico

2,4472 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Spring MVC + AJAX Call Not Returning in JQuery Script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related