2017-07-10 74 views
0

我想從註冊表單中提交所有的字段並將它們存儲在PostgreSQL數據庫中。我使用Spring MVC和jQuery。 POST請求/保存只能使用郵遞員。當我點擊註冊按鈕提交形式,它給了我 -使用Jquery發送POST請求到REST端點

"Request method 'POST' not supported".

任何人可以幫助我嗎?

用戶控制器:

@RestController 
public class UserController { 

@Autowired 
private UserService userService; 

@RequestMapping(method=RequestMethod.POST, value="/save", headers="Accept=application/x-www-form-urlencoded") 
public void registerUser(@RequestBody User user) { 
    userService.registerUser(user); 
} 
} 

的PageController:

@Controller 
public class PageController { 

@RequestMapping("/login") 
public String login() { 
    return "index.html"; 
} 

} 

型號:

@Entity 
@Data 
@Table(name="users") 
public class User { 

@Id @GeneratedValue 
private long id; 

@Column(name="sex") 
private String sex; 

@Column(name="skype") 
private String skype; 

@Column(name="username") 
private String userName; 

@Column(name="email") 
private String email; 

@Column(name="password") 
private String password; 

protected User(){}; 
} 

HTML:

<!doctype html> 
<html> 
<head> 
<title>Login/Register</title> 
<link 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" type="text/css"> 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font- 
awesome.min.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script src="js/login.js"></script> 
</head> 
<body> 
<br> 
<div class="row"> 
    <div class="container"> 
     <div class="login-register-form-section"> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li class="active"><a href="#login" data- 
toggle="tab">Login</a></li> 
       <li><a href="#register" data-toggle="tab">Register</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane fade in active" 
id="login"> 
        <form class="form-horizontal" method="post" action=""> 
         <div class="form-group " > 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-user"></i></div> 
           <input type="text" name="login_email" class="form-control" placeholder="Username or email" required="required" value=""> 
          </div> 
         </div> 
         <div class="form-group "> 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-key"></i></div> 
           <input type="password" name="login_password" class="form-control" placeholder="Password" required="required"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <input type="checkbox" id="rememberMe"> 
          <label for="rememberMe">Remember Me</label> 
          <a href="#" class="pull-right">Forgot password?</a> 
         </div> 
         <input type="submit" value="Login" class="btn btn-success btn-custom"> 
        </form> 
       </div> 
       <div role="tabpanel" class="tab-pane fade" id="register"> 
        <form class="form-horizontal" method="post" action=""> 
         <div class="form-group" id="sex"> 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-user"></i></div> 
           <select type="text" name="gender" class="form-control"> 
           <option>Male</option> 
           <option>Female</option> 
           </select> 
          </div> 
         </div> 
         <div class="form-group "> 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-male"></i></div> 
           <input type="text" name="register_username" class="form-control" placeholder="Username" required="required" value=""> 
          </div> 
         </div> 
         <div class="form-group "> 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-envelope"></i></div> 
           <input type="email" name="register_email" class="form-control" placeholder="Email" required="required" value=""> 
          </div> 
         </div> 
         <div class="form-group "> 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-skype"></i></div> 
           <input type="text" name="register_skype" class="form-control" placeholder="Skype name" required="required" value=""> 
          </div> 
         </div> 
         <div class="form-group "> 
          <div class="input-group"> 
           <div class="input-group-addon"><i class="fa fa-lock"></i></div> 
           <input type="password" name="register_password" class="form-control" placeholder="Password" required="required"> 
          </div> 
         </div> 
         <input type="submit" id="submitbtn" value="Register" class="btn btn-success btn-custom"> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

的jQuery:

jQuery(document).ready(
function($) { 

    $("#submitbtn").click(function(event) { 

     var data = {} 
     data["sex"] = $("#sex").val(); 
     data["skype"] = $("#register_username").val(); 
     data["username"] = $("#register_email").val(); 
     data["email"] = $("#register_skype").val(); 
     data["password"] = $("#register_password").val(); 

     $("#submitbtn").prop("disabled", true); 

     $.ajax({ 
       type: "POST", 
       contentType: "application/json", 
       url: "/save", 
       data: JSON.stringify(data), 
       dataType: 'json', 
       timeout: 600000, 
       success: function (data) { 
        console.log("DONE"); 
       }, 
       error: function (e) { 
        console.log("ERROR: ", e); 
        display(e); 
       } 
     }); 


    }); 

}); 
+0

將控制器中的內容類型更改爲contentType:「application/json」 – cralfaro

+0

這樣子?「= Accept = application/json」 – Michael

回答

0

好的,問題是我沒有正確選擇dom元素,而不是id =「email」我使用的是name =「email」。

<input type="text" name="register_skype" ...... > 
0

而不是做輸入類型= '提交' 你能嘗試使用輸入類型= '按鈕'

改變你在你的Ajax調用發送application/jsondata["username"] = $("#register_email").val(); to data["userName"] = $("#register_email").val();

+0

does not work .... – Michael

+0

我認爲你的JSON字段名稱不匹配。在你的類中你有userName,在jquery中你有它作爲用戶名。 – sparrow

+0

沒有用。它看起來像沒有看到與jQuery文件,因爲如果函數失敗它應該執行「錯誤:」塊嗎? – Michael

0

,但在你的控制器,你說你的端點只接受application/x-www-form-urlencoded

你可以改變你的控制器接受application/json

@RequestMapping(method=RequestMethod.POST, value="/save", headers="Accept=application/json") 

爲了避免錯別字,你也可以使用@RequestMappingconsumes屬性,並傳遞給它一個MediaType常數:

@RequestMapping(method=RequestMethod.POST, value="/save", consumes=MediaType.APPLICATION_JSON_VALUE) 

或者你可以重構你的ajax調用來發送序列化表單數據。

由於@sparrow暗示,您可能還想將按鈕的type屬性更改爲button以避免默認的瀏覽器提交行爲。另外,你可以在你的點擊處理函數中調用event.preventDefault();來完成同樣的事情,但是使用type="submit"沒有什麼意義,除非你真的想使用瀏覽器的默認提交行爲。

+0

做到了。現在當我點擊沒有任何反應,沒有錯誤,控制檯沒有消息。 – Michael

+0

我看起來好像沒有看到jQuery文件。我不知道爲什麼。 – Michael

+0

當我嘗試POST請求到URL:/使用Postman保存時,它沒有問題,它成功地將數據存儲到數據庫。 – Michael