0

I am trying to play with simple web app using spring boot and ajax. my idea is to when i am submit Http POST form data, i want call the controller via AJAX call and display the result on the same web page.

When i run the sprint boot App it picks up correct page index.html on http://localhost:8080/.

currently i can make ajax call , but problem is page is forwarding to http://localhost:8080/test displays

"Greetings from Spring Boot! @myemail"

, but i want it display this and remain in the same page with just data being returned from the controller.

definitely i am missing some thing fundamentally wrong. following are my code snippets.

index.html:

<form id="signup-form" method=post action="/test">
<input type="email" name="email" id="email" placeholder="Email Address"/><input type="submit" value="Sign Up" />
</form>

Ajax call:

$form.addEventListener('submit', function(event) {

                    var data = 'dmc='+ encodeURIComponent(dmc.value);
                        $.ajax({
                            url:"test",
                            data : data,
                            type : "POST",

                            success : function(response) {
                                alert( response );
                                $message._show('success', response);
                            },
                            error : function(xhr, status, error) {
                                alert(xhr.responseText);
                        },
                            complete: function() {
                                window.location = 'index.html';
                              }

                        });
                        return false;

                });

Rest Controller:

@RequestMapping(value="/test",method=RequestMethod.POST)
    public String index(@RequestParam(value="email", required=false) String email) {
        return "Greetings from Spring Boot! "+email+";
    }
Sasi Kathimanda
  • 1,788
  • 3
  • 25
  • 47

2 Answers2

1

Check out this existing question:

How to prevent buttons from submitting forms

Try removing the 'type="submit"' property from your button and giving your button an id.

<input id="buttonId" value="Sign Up" />

Then, use $('buttonId').on('click', function()), where 'buttonId' is the new id you have assigned to the button, instead:

$('buttonId').on('click', function() {

                var data = 'dmc='+ encodeURIComponent(dmc.value);
                    $.ajax({
                        url:"test",
                        data : data,
                        type : "POST",

                        success : function(response) {
                            alert( response );
                            $message._show('success', response);
                        },
                        error : function(xhr, status, error) {
                            alert(xhr.responseText);
                    },
                        complete: function() {
                            window.location = 'index.html';
                          }

                    });
            });

You shouldn't need to return false in your js function. Your controller looks fine.

Community
  • 1
  • 1
Patrick
  • 185
  • 1
  • 11
1

I would use ResponseBody:

@RequestMapping(value="/test",method=RequestMethod.POST)
public @ResponseBody String index(@RequestParam(value="email", required=false) String email)

And then:

success : function(response) {
    $message._show('success', response);
 },
Brian Kates
  • 480
  • 4
  • 14