CODEWITHSUNDEEP
jqueryajax
Andrew
Andrew

Reputation: 141

Ajax redirect to another page on success

I want to make registration new user with HTTP POST method using Ajax and Spring as backend. Then I write a function to send JSON to controller and it's working well (tested, I can receive form values and persist data in DB). The problem is that, I can't redirect after processing to another page eg. 'registerSuccess.jsp'. All the time it's redirecting me to the 'register' page, appending all form values as 'GET' params.

Ajax function:

       $('.ui.form').on('submit', function(){
            $.ajax({
                url: '/PhotoAlbum/user/register/',
                type: "post",
                data: formToJSON(),
                dataType : "json",
                contentType: 'application/json; charset=utf-8',
                async: false,
                success : function(data){
                    console.log("Inside Success");
                    console.log(data);
                    window.location.href = "/PhotoAlbum/user/regsuccess.jsp";
                },
                error : function(xhr, status){
                    console.log(status);
                }
            })
        })
    })
;
      function formToJSON() {
          return JSON.stringify({
              "firstName": $('.ui.form').form('get value', 'firstName'),
              "lastName": $('.ui.form').form('get value', 'lastName'),
              "email": $('.ui.form').form('get value', 'email'),
              "password": $('.ui.form').form('get value', 'password'),
              "matchingPassword": $('.ui.form').form('get value', 'matchingPassword')
          })
      }

@Controller method:

@RequestMapping(value = "register/", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody GenericResponse registerUserAccount(@RequestBody UserDTO user, HttpServletRequest request)
{
    LOGGER.debug("Registration of account: ", user);

    User user1 = new User();

    user1.setFirstName(user.getFirstName());
    user1.setLastName(user.getLastName());
    user1.setEmail(user.getEmail());
    user1.setPassword(user.getPassword());

    userRepository.save(user1);    

    return new GenericResponse("success");
}

Console logs:

Inside Success
(index):134 
Object {message: "success", error: null}

Navigated to http://localhost:8080/PhotoAlbum/user/register/?firstName=John&lastName=…email=john%40gmail.com&password=SecretPass&matchingPassword=SecretPass

Thank's for help.

Upvotes: 1

Views: 5952

Answers (2)

Michael Doye
Michael Doye

Reputation: 8171

It really sounds like the default submit action is still happening, you can try one of the following:

use e.preventDefault() as already suggested:

$('.ui.form').on('submit', function(e){ 
   e.preventDefault();
...

Or, since submit is a jQuery handler, you can try return false which will prevent the event from bubbling as well:

$('.ui.form').on('submit', function(){
        $.ajax({
          ...
          success : function(data){
              ...
          },
          error : function(xhr, status){
              ...
          }
        })
    })
    return false;
});

Upvotes: 1

Ele
Ele

Reputation: 33726

I suggest you to use:

location.replace("/PhotoAlbum/user/regsuccess.jsp");

That way, you're restricting the user to use back button.

Upvotes: 1

Related Questions