含对象数组的JS对象存入localStorage并通过Ajax传给Java Servlet

当前需要将包含普通属性和表格对象数组的JavaScript对象统一存入localStorage，再通过Ajax传输到Java Servlet并提取数据，避免分开存储多个localStorage项的问题。以下是完整实现步骤：

1. 整合表格数据到主对象并存入localStorage #

修改原有代码，将表格数据数组直接作为主对象的一个属性，统一序列化后存入localStorage：

// 修改表格数据获取函数，返回数组而非字符串
function getSuperContributionsTableData(table) {
    let yourSuperContributionsTableData = [];
    // 跳过表头行，从第1行开始遍历
    for (let i = 1; i < table.rows.length; i++) {
        let row = table.rows[i];
        // 检查单元格是否有值
        if (row.cells[0].innerText !== "" && row.cells[1].innerText !== "" && row.cells[2].innerText !== "") {
            const rowData = {
                [SUPER_TAXATION_CONTRIBUTION]: row.cells[2].innerText,
                [SUPER_AMOUNT_CONTRIBUTION]: row.cells[1].innerText,
                [SUPER_AGE_CONTRIBUTION]: row.cells[0].innerText
            };
            yourSuperContributionsTableData.push(rowData);
        }
    }
    return yourSuperContributionsTableData;
}

// 存储主对象时整合表格数据
if (formIsValid) {
    const object = localStorage.getItem(scenarioName);
    let scenarioObject = JSON.parse(object) || {}; // 处理首次存储的空对象情况

    // 设置普通属性
    scenarioObject.SUPER_BALANCE = 420000;
    scenarioObject.SUPER_INVESTMENT_FEES = 0.14;
    scenarioObject.SUPER_ADMIN_FEES = 120;
    scenarioObject.LIFE_INSURANCE = 200000;
    scenarioObject.ANNUAL_LUMP_SUM_SUPER_CONTRIBUTION = 1500;

    // 整合表格数组到主对象
    const table = document.getElementById("your-extra-super-contributions-table");
    scenarioObject.SUPER_CONTRIBUTIONS_TABLE = getSuperContributionsTableData(table);

    // 统一序列化并存入localStorage
    const objectString = JSON.stringify(scenarioObject);
    localStorage.setItem(scenarioName, objectString);
}

2. 从localStorage取出数据并渲染（含表格） #

取出完整对象后，直接提取普通属性和表格数组，渲染表单和表格：

const object = localStorage.getItem(activeScenario);
const scenarioObject = JSON.parse(object) || {};

// 渲染普通表单字段
$("#your-super-balance").val(scenarioObject.SUPER_BALANCE || "");
$("#super-investment-fees").val(scenarioObject.SUPER_INVESTMENT_FEES || "");
$("#super-admin-fees").val(scenarioObject.SUPER_ADMIN_FEES || "");
$("#life-insurance").val(scenarioObject.LIFE_INSURANCE || "");
$("#your-annual-lump-sum-super-contribution").val(scenarioObject.ANNUAL_LUMP_SUM_SUPER_CONTRIBUTION || "");

// 渲染表格数据
const table = document.getElementById("your-extra-super-contributions-table");
// 清空现有数据行（保留表头）
while (table.rows.length > 1) {
    table.deleteRow(1);
}

// 遍历表格数组，添加行
const tableData = scenarioObject.SUPER_CONTRIBUTIONS_TABLE || [];
tableData.forEach(rowData => {
    const newRow = table.insertRow();
    newRow.insertCell(0).innerText = rowData[SUPER_AGE_CONTRIBUTION];
    newRow.insertCell(1).innerText = rowData[SUPER_AMOUNT_CONTRIBUTION];
    newRow.insertCell(2).innerText = rowData[SUPER_TAXATION_CONTRIBUTION];
});

3. Ajax传输完整对象到Java Servlet #

直接传输整合后的完整对象，推荐使用JSON格式传输，后端处理更便捷：

function sendScenarioDetailsToServer() {
    const activeScenario = localStorage.getItem(ACTIVE_SCENARIO_KEY);
    const item = localStorage.getItem(activeScenario);
    const passedData = JSON.parse(item) || {};

    $.ajax({
        type: "POST",
        url: "ScenarioServlet",
        contentType: "application/json", // 指定发送JSON格式
        data: JSON.stringify(passedData), // 序列化完整对象为JSON字符串
        success: function (data) {
            const SUCCESS_INT = data.length - 1;
            if (data[SUCCESS_INT].SUCCESS === FAIL) {
                displayPopupMessage("Error saving scenario ", "Save Scenario");
            } else {
                displayResult();
            }
        },
        error: function (error, status) {
            console.log(`Error ${error}`);
            const stackTrace = getStackTrace();
            const message = "An error occurred sending your data to the server for calculation. ";
            displayPopupMessage(message, "Server Error.", stackTrace);
        }
    });
}

若需兼容表单格式，可直接传递对象（jQuery自动转换为键值对）：

$.ajax({
    type: "POST",
    url: "ScenarioServlet",
    data: passedData,
    // 其他配置不变
});

4. Java Servlet端提取数据 #

情况1：接收JSON格式数据 #

使用Jackson解析库将请求体转换为Java对象，先定义对应实体类：

// Scenario.java
public class Scenario {
    private double SUPER_BALANCE;
    private double SUPER_INVESTMENT_FEES;
    private int SUPER_ADMIN_FEES;
    private int LIFE_INSURANCE;
    private int ANNUAL_LUMP_SUM_SUPER_CONTRIBUTION;
    private List<SuperContribution> SUPER_CONTRIBUTIONS_TABLE;

    // Getters and Setters
    public static class SuperContribution {
        private String SUPER_TAXATION_CONTRIBUTION;
        private String SUPER_AMOUNT_CONTRIBUTION;
        private String SUPER_AGE_CONTRIBUTION;

        // Getters and Setters
    }
}

Servlet中解析逻辑：

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;

@WebServlet("/ScenarioServlet")
public class ScenarioServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 读取请求体JSON字符串
        BufferedReader reader = request.getReader();
        StringBuilder sb = new StringBuilder();
        String line;
        while ((line = reader.readLine()) != null) {
            sb.append(line);
        }
        String json = sb.toString();

        // 解析为Java对象
        Scenario scenario = objectMapper.readValue(json, Scenario.class);

        // 提取数据使用
        double superBalance = scenario.getSUPER_BALANCE();
        List<Scenario.SuperContribution> tableData = scenario.getSUPER_CONTRIBUTIONS_TABLE();
        for (Scenario.SuperContribution contribution : tableData) {
            String age = contribution.getSUPER_AGE_CONTRIBUTION();
            String amount = contribution.getSUPER_AMOUNT_CONTRIBUTION();
            String taxation = contribution.getSUPER_TAXATION_CONTRIBUTION();
            // 处理每行数据
        }

        // 后续业务逻辑...
    }
}

情况2：接收表单格式数据 #

手动提取数组参数（参数名格式为SUPER_CONTRIBUTIONS_TABLE[index].property）：

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 提取普通属性
    double superBalance = Double.parseDouble(request.getParameter("SUPER_BALANCE"));
    double investmentFees = Double.parseDouble(request.getParameter("SUPER_INVESTMENT_FEES"));

    // 提取表格数组
    List<SuperContribution> tableData = new ArrayList<>();
    int index = 0;
    while (true) {
        String age = request.getParameter("SUPER_CONTRIBUTIONS_TABLE[" + index + "].SUPER_AGE_CONTRIBUTION");
        if (age == null) break;

        String amount = request.getParameter("SUPER_CONTRIBUTIONS_TABLE[" + index + "].SUPER_AMOUNT_CONTRIBUTION");
        String taxation = request.getParameter("SUPER_CONTRIBUTIONS_TABLE[" + index + "].SUPER_TAXATION_CONTRIBUTION");

        SuperContribution contribution = new SuperContribution();
        contribution.setSUPER_AGE_CONTRIBUTION(age);
        contribution.setSUPER_AMOUNT_CONTRIBUTION(amount);
        contribution.setSUPER_TAXATION_CONTRIBUTION(taxation);
        tableData.add(contribution);

        index++;
    }

    // 后续业务逻辑...
}

内容的提问来源于stack exchange，提问作者Lorna from Perth