如何从 JavaScript 中获取 Java 模型属性

在前后端分离的项目中，前端通常需要获取后端 Java 模型的属性来进行一些操作，例如展示数据、表单验证等。本文将介绍几种获取 Java 模型属性的方式。

1. 使用 Java 对象转 JSON

我们可以将 Java 模型对象转为 JSON 格式，然后通过 JSON.parse() 方法将 JSON 字符串转为 JavaScript 对象。以下是 Java 后端代码示例：

import com.alibaba.fastjson.JSON;
// 导入 fastjson 库

public class User {
    private Integer id;
    private String name;

    // 省略 getter 和 setter 方法

    public String toJson() {
        return JSON.toJSONString(this);
    }
}

以上代码使用了阿里巴巴的 fastjson 库将 Java 对象转为 JSON 字符串。接下来在前端 JavaScript 中获取对象属性：

const userJson = '{"id":1,"name":"Tom"}';
const user = JSON.parse(userJson);
console.log(user.id); // 输出 1
console.log(user.name); // 输出 Tom

2. 使用 AJAX 请求获取 JSON 数据

在前端中，我们可以通过 AJAX 的方式请求后端接口，并获取后端返回的 JSON 数据。以下是后端 Java 代码示例：

import com.alibaba.fastjson.JSON;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {

    @GetMapping("/user")
    public String getUser() {
        User user = new User();
        user.setId(1);
        user.setName("Tom");
        return JSON.toJSONString(user);
    }
}

以上代码中，我们通过 @RestController 注解标注该类为控制器，并使用 @GetMapping 注解标注请求路径和请求方法。我们将一个 User 对象转为 JSON 字符串，并返回给前端。接下来在前端 JavaScript 中发起 AJAX 请求：

$.ajax({
   type: "GET",
   url: "/user",
   success: function(userJson) {
        const user = JSON.parse(userJson);
        console.log(user.id); // 输出 1
        console.log(user.name); // 输出 Tom
   }
});

以上代码中，我们使用 jQuery 的 $.ajax() 方法发起 GET 请求，并在成功回调函数中获取到后端返回的 JSON 数据，并转为 JavaScript 对象。

3. 使用前端模板引擎

前端模板引擎可以将后端传递的 Java 模型属性渲染到 HTML 模板中，在需要获取属性的地方直接引用即可。以下是使用 handlebars.js 模板引擎的代码示例：

const source = '<p>{{id}} - {{name}}</p>';
const template = Handlebars.compile(source);
const context = { id: 1, name: 'Tom' };
const html = template(context);
$(".content").append(html); // 插入到 HTML 元素中

以上代码中，我们使用 handlebars.js 模板引擎，定义了一个包含 {{id}} 和 {{name}} 的 HTML 模板。接着，将 Java 模型属性转为 JavaScript 对象 context，将该对象传递到模板中进行渲染，并将渲染结果插入到 HTML 元素中。

总结

本文介绍了三种获取 Java 模型属性的方式，包括使用 Java 对象转 JSON、使用 AJAX 请求获取 JSON 数据、使用前端模板引擎等。开发者在实际项目中，可以根据具体需求选择相应的方式。