Fatal编程技术网
  • javascript/
  • Javascript 使用Jquery向REST端点发送POST请求

Javascript 使用Jquery向REST端点发送POST请求

javascript java jquery rest spring-mvc

Javascript 使用Jquery向REST端点发送POST请求,javascript,java,jquery,rest,spring-mvc,Javascript,Java,Jquery,Rest,Spring Mvc,我想提交注册表中的所有字段，并将它们存储在PostgreSQL数据库中。我正在使用SpringMVC和jQuery。POST请求到/保存仅在使用邮递员时有效。当我点击注册按钮提交表格时，它会给我- “不支持请求方法“POST” 有人能帮我吗 用户控制器： @RestController public class UserController { @Autowired private UserService userService; @RequestMapping(me

我想提交注册表中的所有字段，并将它们存储在PostgreSQL数据库中。我正在使用SpringMVC和jQuery。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);
    }
}

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

<!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(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);
                 }
        });


    });

});
页面控制器：

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

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

<!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(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);
                 }
        });


    });

});
型号：

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

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

<!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(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);
                 }
        });


    });

});
HTML:

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

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

<!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(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);
                 }
        });


    });

});
您可以尝试使用input type='button'来代替input type='submit'吗

更改行
data[“username”]=$（“#注册#u电子邮件”）.val（）；至数据[“用户名”]=$（“#注册电子邮件”）.val（）

您正在ajax调用中发送
application/json
，但在控制器中，您说您的端点只接受
application/x-www-form-urlencoded

您可以将控制器更改为接受
应用程序/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调用以发送序列化的表单数据

正如建议的那样，您可能还希望将按钮的
类型
属性更改为
按钮
，以避免默认的浏览器提交行为。或者，您可以调用
event.preventDefault（）
在您的click handler函数中完成同样的任务，但是使用
type=“submit”
没有多大意义，除非您确实想要使用浏览器的默认提交行为。

好的，问题是我没有正确选择dom元素，而不是id=“email”我使用的是name=“email”
将控制器中的内容类型更改为contentType：“application/json”，如下所示？headers=“Accept=application/json”做到了这一点。现在，当我在控制台中单击nothing时，并没有发生任何错误，并没有消息。我看起来它并没有看到带有jQuery的文件。我不知道为什么。当我尝试使用Postman将请求发送到url:/save时没有问题，它成功地将数据存储到DB。我认为您的JSON字段名称不匹配。在你的类中你有用户名，而在jquery中你有用户名。不起作用。看起来它没有看到jQuery文件，因为如果函数失败，它应该执行“error:”块，对吗？