代码之家 › 专栏 › 技术社区 › Tdellard1

如何从客户端发送JavaScript对象,以及如何在Spring引导后端接收和解析它们?

axios spring-boot json java javascript

Tdellard1 · 技术社区 · 6 年前

我来了很多次,离开这个问题,而我试图使我的网络应用程序,已经厌倦了没有结果,以至于我不得不问这里,所以请原谅我,如果我来发泄。。。我很生气。

我试图以键-值对的形式将数据从我的客户机(vanilla js)发送到我的后端(spring boot java)。我尝试过很多方法,但似乎找不到正确的方法/组合来实现我想做的事情。我目前的非工作代码如下。

客户端JS

var object = {
        'id' : 1,
        'username' : 'jumpthruhoops',
        'password' : 'melodysteez'
    };

    Axios
        .post('http://localhost:8080/gameSchedule', JSON.stringify(object))
        .then((response) => {
            console.log(response.data);
        });

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(@RequestBody String user) {
    System.out.println(user);
    return "test";
}

下面的代码是我目前拥有的,已经给了我任何类型的结果接近我所寻找的。它给了我下面的印刷线。。。

%7B%22id%22%3A1%2C%22用户名%22%3A%22tdellard1%22%2C%22密码%22%3A%22sisters3%22%7D=

因为它更复杂,我不想在方法的参数中使用很多@RequestParams(“name”)字符串VaribleName,比如40次。这也是获得结果的唯一其他方法,但将这些变量传递到url中是令人恼火的。

我还尝试了@modeltattribute和(@RequestBody User)这两个返回错误,其中一个似乎是

018-10-30 23:38:29.346 WARN 12688---[io-8080-exec-10].w.s.m.s.DefaultHandlerExceptionResolver:已解析[org.springframework.web.HttpMediaTypeNotSupportedException:内容类型'application/x-www-form-urlencoded;charset=UTF-8'不受支持]

因此,我非常想问的是,指导从Axios发送数据的最佳方式是什么(形式:序列化、JSON.StrugI化、JavaScript对象等),以及在我的Spring引导后端使用哪些方法来获取这些数据并使之操作,这样我就可以把它变成POJO。

2 回复 | 直到 6 年前

Jonathan JOhx 6 年前

只需删除JSON.stringify(object)并放置object。

Axios
    .post('http://localhost:8080/gameSchedule', object)
    .then((response) => {
        console.log(response.data);
    });

你可以在这里看到一个POST请求的例子 axios documentation

在Spring boot上,必须创建如下实体:

@Entity
public class UserAccount implements Serializable {

@Id
private Long id;

@Column(unique = true, nullable = false)
@Size(max = 255)
private String userName;

@Column(nullable = false)
@NotNull
private String password;

public Long getId() {
    return id;
}

public void setId(Long id) {
    this.id = id;
}

public String getUserName() {
    return userName;
}

public void setUserName(String userName) {
    this.userName = userName;
}

public String getPassword() {
    return password;
}

public void setPassword(String password) {
    this.password = password;
}

}

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public UserAccount getSchedule(@RequestBody UserAccount user) {
    System.out.println(user.getUserName());
    return user;
}

Navin Gelot 6 年前

如果要发送对象,则在后端接收时必须使用对象,并确保请求对象中的字段名和后端类的字段名必须相同, 所以应该是这样的:

我只是在您的代码访问字段中做一些更改:

var data = {  
        'id' : 1,
        'username' : 'jumpthruhoops',
        'password' : 'melodysteez'
    };
// name of variable(data variable) doesn't matter but inside everything consider as a body

axios.post('http://localhost:8080/gameSchedule', JSON.stringify(object), {
        headers: {
            'Content-Type': 'application/json',
        }
    }
    );

//create one Student class to map fields with body 

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(@RequestBody Student student) {
    System.out.println(student.id);
    System.out.println(student.username);
    System.out.println(student.password);
    return "test"
}