JSON工具类的构建(前端版本)

2024-02-01 05:24:08

在前后端交互的选择上，之前一直采用的是模板引擎（因为我只负责后端）。而这次的一个算是作业吧，前后端都是我，所以就研究了一下JSON交互在java web的应用（主要是前端）。

因为我是先写后端版本的，所以优缺点部分请跳转至JSON工具类的构建（后端版本）查看。

因为我对js也没做过深入的研究，所以我写前端的代码一般就是现学现卖，而且说实话我对js也不是特别感冒，感觉挺乱的，代码不清晰，而且可维护性也不太好。

既然是这样，那我就说说我写的JSON交互代码吧。

首先是前端的JS代码：

function sendJSONData() {
  var data = {
    "name": "John Doe",
    "age": 30,
    "city": "New York"
  };

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost:8080/json", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(JSON.stringify(data));

  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
      console.log(response);
    }
  };
}

这段代码很简单，首先是定义了一个JSON对象data，然后用XMLHttpRequest对象发送了一个POST请求到服务器端的JSON端点，并将JSON对象data作为请求体发送了过去。

然后在服务器端处理完请求后，会返回一个JSON响应，前端的JS代码会通过onreadystatechange事件监听器来处理这个响应，并将JSON响应解析成一个JavaScript对象，然后就可以在控制台输出这个对象了。

这是前端的代码，那么后端的代码是怎么样的呢？

@PostMapping(path = "/json")
public @ResponseBody ResponseEntity<String> receiveJSONData(@RequestBody String data) {
  // 将JSON数据解析成一个Java对象
  JsonObject jsonObject = new JsonObject(data);

  // 从JSON对象中获取数据
  String name = jsonObject.get("name").getAsString();
  int age = jsonObject.get("age").getAsInt();
  String city = jsonObject.get("city").getAsString();

  // 将数据存储到数据库中

  // 返回一个JSON响应
  JsonObject response = new JsonObject();
  response.addProperty("status", "success");
  response.addProperty("message", "Data received successfully");

  return ResponseEntity.ok(response.toString());
}