通过 Ajax 提交表单不起作用，Spring 控制器中的数据为空答案

【问题标题】：Submitting form through Ajax not working, data are null in Spring controller通过 Ajax 提交表单不起作用，Spring 控制器中的数据为空
【发布时间】：2017-08-17 18:47:09
【问题描述】：

当我使用 ajax 调用“POST”将我的简单表单提交到我的数据库时，它会将空值保存到我的数据库中。我正在使用 Spring Boot、Spring Data、PostgreSQL。我试图解决这个问题几个小时，但找不到任何东西。我的代码有什么问题？

.................................................. ..................................................... ..................................................... ......

型号：

package english.chat.app.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Data;

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

@Id @GeneratedValue
private long id;

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

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

protected User(){};
}

控制器：

package english.chat.app.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import english.chat.app.model.User;
import english.chat.app.services.UserService;

@RestController
public class UserController {

@Autowired
private UserService userService;

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

}

存储库：

package english.chat.app.repo;

import java.util.List;

import org.springframework.data.repository.CrudRepository;

import english.chat.app.model.User;

public interface UserRepo extends CrudRepository<User, Long> {
}

HTML：

<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<form id="form">
    <input type="email" name="email">
    <input type="password" name="password">
    <button type="submit" id="butt">Create</button>
</form>
</body>
</html>

JS：

$(document).ready(function () {

$("#form").submit(function (event) {

    //stop submit the form, we will post it manually.
    event.preventDefault();

    fire_ajax_submit();

});

});

function fire_ajax_submit() {

var search = {};
search["password"] = $("#password").val();
search["email"] = $("#email").val();

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

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "http://localhost:8080/save",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
    },
    error: function (e) {
    }
});

}

【问题讨论】：

标签： jquery ajax spring postgresql spring-boot

【解决方案1】：

您没有正确选择 dom 元素，#password 表示您选择了一个带有 id 密码的元素，对于 #email 也是如此，因此请相应地更新您的 html，您应该能够保留您的用户。

<input type="email" name="email" id="email">
<input type="password" name="password" id="password">

【讨论】：