CODEWITHSUNDEEP
javajsonajaxspark-java
TonyW
TonyW

Reputation: 18875

respond to AJAX request with JSON object?

I am doing a toy program that asks user to input "username" and "fullname" on an html form, the form will be submitted by AJAX to the following method in Spark framework (see here for Spark:

post("/admin/user/signup", "application/json", (request, response) -> {
            String username = request.queryParams("username");
            String fullname = request.queryParams("fullname");
            System.out.println("username is: " + username +", full name is: " + fullname);
            Map<String, Object> registerResults = new HashMap<String, Object>();
            registerResults.put("success", "successfully registered " + username);
            return new MyMessage("successful registration!");
        }, new JsonTransformer());

And the following is my AJAX code that supposedly submits and receives the response from the above post() method:

<script>
        $(document).ready(function() {
            $('#registerForm').submit(function() {
                var formData = $('#registerForm').serialize();    /* capture the form data*/
                $.getJSON('/admin/user/signup', formData, registerResults);
           //     $.post('/admin/user/signup', formData, registerResults);   /* get JSON back from the post method */
            });
            function registerResults(data) {
                    $('#registerForm').fadeOut();
                    $('.starter-template').html(data.message);
                }  // end of registerResults
        });  // end of ready
        </script>

However, the AJAX code cannot receive the JSON object, instead the JSON object is simply printed on the web page /admin/user/signup:

{"message":"successful registration!"}

So I am asking for help how to return the JSON object to AJAX request in Spark? thanks

Upvotes: 0

Views: 1558

Answers (3)

user3662273
user3662273

Reputation: 554

Instead of return new MyMessage("successful registration!");

Just pass like this return new MyMessage(registerResults);

now,you are not returning this registerResults map value.
I hope you are using play framework.then it should work

And one more thing,you should deny the form from submitting. so, use

 $('#registerForm').submit(function(e) {
            e.preventDefault();
// do your stuff here

});

Upvotes: 0

Boguslaw
Boguslaw

Reputation: 130

You can not treat json as HTML by using html() function, you need to parse it by parseJson() function from jQuery: http://api.jquery.com/jquery.parsejson/

var obj = jQuery.parseJSON(data);
$('.starter-template').html(obj.message);

Upvotes: -1

Runcorn
Runcorn

Reputation: 5224

You do realize that you are submitting the form. So instead of the supposed AJAX call the form is being submitted and hence the resulting page ...

So you should stop the form submit propagation by simply adding 

event.preventDefault();

OR return false; at the end of the submit handler.

in the form submit handler.

<script>
        $(document).ready(function() {
            $('#registerForm').submit(function(event) {
            event.preventDefault();
                var formData = $('#registerForm').serialize();    /* capture the form data*/
                $.getJSON('/admin/user/signup', formData, registerResults);
           //     $.post('/admin/user/signup', formData, registerResults);   /* get JSON back from the post method */
            });
            function registerResults(data) {
                    $('#registerForm').fadeOut();
                    $('.starter-template').html(data.message);
                }  // end of registerResults
        });  // end of ready
        </script>

Upvotes: 2

Related Questions