Question

我想使用Ajax和Spring作为后端，使用HTTP POST方法注册新用户。然后我编写了一个函数来将JSON发送到控制器并且它运行良好（经过测试，我可以接收表单值并在DB中保存数据）。问题是，我无法在处理后重定向到另一个页面，例如。 'registerSuccess.jsp'。它一直将我重定向到“注册”页面，将所有表单值附加为“GET”参数。

Ajax功能：

       $('.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方法：

@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");
}

控制台日志：

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

感谢您的帮助。

Answer 1

我建议你使用：

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

这样，您就可以限制用户使用后退按钮。

Answer 2

真的听起来仍然是默认提交操作，您可以尝试以下方法之一：

按照建议使用e.preventDefault()：

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

或者，由于submit是一个jQuery处理程序，您可以尝试使用return false来阻止事件冒泡：

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

成功时，Ajax重定向到另一个页面

2 个答案: