[英]Sending POST request to REST endpoint using Jquery
我想提交注冊表中的所有字段，並將它們存儲在PostgreSQL數據庫中。 我正在使用Spring MVC和jQuery。 / save的POST請求僅在使用郵遞員的情況下有效。 當我單擊“注冊”按鈕提交表單時，它給了我-
“不支持請求方法'POST'”。
有誰能夠幫助我？
用戶控制器：
@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);
}
});
});
});
您可以嘗試使用輸入類型=“按鈕”來代替輸入類型=“提交”
更改行data["username"] = $("#register_email").val(); to data["userName"] = $("#register_email").val(); data["username"] = $("#register_email").val(); to data["userName"] = $("#register_email").val();
您在ajax調用中發送application/json ，但是在您的控制器中，您說端點僅接受application/x-www-form-urlencoded 。
您可以更改控制器以接受application/json ：
@RequestMapping(method=RequestMethod.POST, value="/save", headers="Accept=application/json")
為了避免輸入錯誤，您還可以使用@RequestMapping的consumes屬性，並將其傳遞給MediaType常量：
@RequestMapping(method=RequestMethod.POST, value="/save", consumes=MediaType.APPLICATION_JSON_VALUE)
或者，您可以重構ajax調用以發送序列化的表單數據。
正如@sparrow所建議的那樣，您可能還希望將按鈕的type屬性更改為button ，以避免默認的瀏覽器提交行為。 或者，您可以調用event.preventDefault(); 在您的點擊處理程序函數內部完成相同的操作，但是除非您確實想要使用瀏覽器的默認提交行為，否則使用type="submit"並沒有多大意義。
好的，問題是我沒有正確選擇dom元素，而是使用name =“ email”而不是id =“ email”。
<input type="text" name="register_skype" ...... >
jQuery ajax post在ipad chrome上使用get方法發送請求
[英]jQuery ajax post is sending request using get method on ipad chrome
JQuery $ .ajax（），$。post（）將GET作為Request Method發送
[英]JQuery $.ajax(),$.post() sending GET as Request Method
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.