如何通过Ajax/jQuery将HTML表单数据提交保存到JSON文件

• 提交按钮的选择器语法错误，类选择器需要加.前缀，原代码写的$("admin__submit")缺少类标识符
• 仅获取了输入框的DOM对象，没有读取输入值，需要补充.val()方法获取用户输入的内容
• 变量名重复冲突：先声明了price存储原价，后续又把促销价赋值给了price，导致原价数据被覆盖
• 提交参数手动拼接了多余的引号，$.post会自动处理数据序列化，额外添加的引号会导致最终存储的内容多了冗余引号
• 未阻止表单的默认提交行为，点击按钮后会触发表单默认跳转，导致AJAX请求失效
• 部分字段类型错误：stock应为数字类型、allowOutOfStockPurchases应为布尔类型，不能直接传入输入框的字符串值
• 引用了未声明的变量sale-price，横线在JS变量名中属于非法字符，需要换成合法的变量名比如salePrice

// 监听提交按钮点击事件
$(".admin__submit").click(function(e) {
    // 阻止表单默认提交刷新行为
    e.preventDefault();

    // 读取所有表单输入值
    const id = $('.admin__id').val().trim();
    const price = $('.admin__price').val().trim();
    const url = $('.admin__url').val().trim();
    const dataItemDesc = $('.admin__data-item-description').val().trim();
    const dataItemName = $('.admin__data-item-name').val().trim();
    const year = $('.admin__year').val().trim();
    const issue = $('.admin__issue').val().trim();
    const series = $('.admin__series').val().trim();
    const type = $('.admin__type').val().trim();
    const label = $('.admin__label').val().trim();
    const salePrice = $('.admin__sale-price').val().trim();
    const publisher = $('.admin__publisher').val().trim();
    const extra = $('.admin__extra').val().trim();
    const run = $('.admin__run').val().trim();
    const weight = $('.admin__weight').val().trim();
    // 转数字类型
    const stock = parseInt($('.admin__stock').val().trim(), 10) || 0;
    // 转布尔类型
    const allowOutOfStockPurchases = $('.admin__allowOutOfStockPurchases').val().trim().toLowerCase() === 'true';

    // 构造提交数据
    const submitData = {
        "id": id,
        "price": price,
        "url": url,
        "data-item-description": dataItemDesc,
        // 此处逻辑可根据实际需求调整，示例沿用你原本用url作为图片地址的逻辑
        "data-item-image": url,
        "data-item-name": dataItemName,
        "year": year,
        "issue": issue,
        "series": series,
        "type": type,
        "label": label,
        "sale-price": salePrice,
        "publisher": publisher,
        "extra": extra,
        // enlarge字段表单无对应输入项，可自行补充逻辑赋值
        "enlarge": "",
        "run": run,
        "dimensions": {
            "weight": weight
        },
        "stock": stock,
        "allowOutOfStockPurchases": allowOutOfStockPurchases
    };

    // 发送POST请求
    $.post("/comics.json", submitData, function(data, status) {
        alert("提交成功，返回数据：" + JSON.stringify(data) + "\n状态：" + status);
    }).fail(function(err) {
        alert("提交失败，错误信息：" + err.responseText);
    });
});

前端无法直接写入本地的comics.json文件，静态服务器不支持直接修改本地文件，你需要额外编写后端接口处理请求：

• 后端接口接收前端发送的JSON数据
• 读取本地comics.json的原有内容，把新数据追加到对应数组中
• 把更新后的内容重新写入comics.json文件即可

内容的提问来源于stack exchange，提问作者Matt Fuller