本文共 2536 字，大约阅读时间需要 8 分钟。

前端JS代码优化与后端接收实现

作为一个前端开发人员，在处理类似于ChangeRoute的功能时，常需要将用户的选择数据发送到后端进行处理。本文将以实际项目为例，详细介绍前端JS代码的实现，以及后端接收的处理逻辑，并展示对应的实体类配置。

前端实现

前端代码主要包括一个JS函数，用于收集用户的选择数据并发送到后端。以下是核心实现逻辑：

function changeRoute() {
    var changeRouteArray = [];
    // jQuery选中所有已选中的输入字段
    $.each($('input(class="":checked)'), function(k, v) {
        var routeRuleId = v.id.substring(0, 1);
        var originalLinkName = v.id.substring(1);
        var changeLinkName = $('#' + v.id + 'change').val();
        changeRouteArray.push({
            routeRuleId: routeRuleId,
            originalLinkName: originalLinkName,
            changeLinkName: changeLinkName
        });
    });
    
    // 构造请求URL
    var url = $('').attr('href');
    $.ajax({
        type: 'POST',
        url: url.attr('href'),
        data: JSON.stringify(changeRouteArray),
        contentType: 'application/json;charset=UTF-8',
        dataType: 'json',
        success: function(data) {
            alert('提交成功');
        }
    });
}

该函数的主要工作是：通过jQuery选中所有携带checked类的输入元素，提取对应的路由ID、原始链接名称及更改后的链接名称（从隐藏输入字段中获取），将这些信息收集到数组changeRouteArray中。

数据发送逻辑

函数通过$.ajax()发送POST请求，传递的数据是转换为JSON格式的changeRouteArray。请求设置了合适的Content-Type和dataType，确保客户端与服务器之间的数据交互能够顺利进行。

后端处理

后端接收到前端发送的JSON数组后，按照以下逻辑进行处理：

@RequestMapping(value = "/ChangeRoute", method = RequestMethod.POST)
public boolean changeRoute(@RequestBody List
   
     changeRouteList) {
    System.out.println("changeRouteList: " + changeRouteList);
    return true;
}
   

这个控制器方法主要负责接收前端发送的数据。方法参数为一个List<ChangeRoute>类型的数据容器，使用@RequestBody注解将HTTP请求正文转换为Java对象。控制器只需打印接收到的数据并返回布尔值，表示处理结果。

实体类配置

为了保证前后端数据的准确传递，需要在Java实体类中定义对应的数据结构：

@Data
@Entity
@Table(name = "CHANGE_ROUTE_TABLE")
@JsonAutoDetect(fieldVisibility = JsonAutoDetect.Visibility.ANY, getterVisibility = JsonAutoDetect.Visibility.NONE)
@JsonPropertyOrder()
public class ChangeRoute {
    @Id
    @Column(name = "ROUTE_RULE_ID")
    @JsonProperty("ROUTE_RULE_ID")
    private Integer routeRuleId;
    @Column(name = "ORIGINAL_LINK_NAME")
    @JsonProperty("ORIGINAL_LINK_NAME")
    private String originalLinkName;
    @Column(name = "CHANGE_LINK_NAME")
    @JsonProperty("CHANGE_LINK_NAME")
    private String changeLinkName;
}

这个实体类定义了一个ChangeRoute对象，包含路由ID、原始链接名称及更改后的链接名称字段，用于数据库存储和数据传递。

其他优化点

在实际项目中，可以考虑以下优化措施：

通过以上优化，可以提升前后端互通的稳定性和可维护性，同时为后续功能扩展埋下良好的基础。