如何为表单添加的电影对象数组动态生成递增movieid？

我来帮你搞定这个问题，先拆解下当前代码里的两个核心问题：

问题1：重复生成电影对象 #

你用$.each(formData, function() { ... })循环表单字段数组，但serializeArray()返回的是每个表单字段组成的数组（比如你的表单有title和movieurl两个字段，这个数组就有2个元素），所以每次点击按钮都会循环两次，生成两个完全一样的电影对象——这就是你输出里出现重复条目的原因。

问题2：movieid固定为1 #

你直接把movieid写死成了'1'，而且没有一个变量来追踪当前的id值，导致每次添加都用同一个id。

修改方案 #

我们需要做两个关键调整：

1. 把追踪movieid的变量放在点击事件外面，这样每次点击按钮时它不会被重置，能持续保持递增状态。
2. 去掉不必要的$.each循环，直接从formData中提取字段值生成单个电影对象。

修改后的代码如下：

// 声明变量追踪当前movieid，初始值设为1
let currentMovieId = 1;

$("#btnAddMovie").click(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新导致id重置
    console.log('btn-movie triggered');
    
    var formData = $("#movieForm").serializeArray();
    // 精准提取表单字段值（比用索引更可靠，不怕字段顺序改变）
    const title = formData.find(item => item.name === 'title').value;
    const movieurl = formData.find(item => item.name === 'movieurl').value;
    
    // 生成单个电影对象，使用当前id后立即自增
    const movieObj = { 
        title: title, 
        movieurl: movieurl, 
        movieid: currentMovieId.toString() // 若不需要字符串类型，直接用数字即可
    };
    currentMovieId++;
    
    var params = JSON.stringify({ movies: [movieObj] });
    $.ajax({
        type: 'POST',
        data: { params: params },
        url: 'save_to_json.php',
        success: function(data) {
            $('#msg').html(data).fadeIn('slow');
            $('#msg').delay(2000).fadeOut('slow');
            $("#movieForm")[0].reset(); // 添加成功后重置表单
        },
        error: function(xhr, status, error) {
            // 修正error回调的参数问题，原来的data是undefined
            $('#error-msg').html('添加失败：' + error).fadeIn('slow');
            $('#error-msg').delay(2000).fadeOut('slow');
        }
    });
});

额外补充 #

如果你的页面会刷新，或者需要保证id的全局唯一性（避免前端重启后id从1重新开始），建议在页面加载时通过AJAX请求后端，获取当前已存在的最大movieid，然后把currentMovieId设为这个最大值+1。

这样修改后，每次点击添加按钮，movieid就会依次变成1、2、3...，同时也不会再生成重复的电影对象了。

内容的提问来源于stack exchange，提问作者The Dead Man