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

时间:2017-08-17 18:47:09

标签: jquery ajax spring postgresql spring-boot

当我使用ajax调用'POST'向我的数据库提交我的简单表单时,它将空值保存到我的数据库中。我使用Spring启动,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) {
    }
});

}

1 个答案:

答案 0 :(得分:0)

你没有正确选择dom元素,#password意味着你选择了一个带有id密码的元素,对于#email也是如此,所以你应该相应地更新你的html,你应该能够坚持你的用户。

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