AJAX无法提交表单，但通过form的action属性可提交的问题排查

修正方案： #

第一步：正确收集表单输入数据

修改表单提交的AJAX代码，先把.eBlock里的所有用户输入收集成键值对对象：

$('#my_form').submit(function(event) {
    event.preventDefault();
    
    // 收集所有.eBlock下的输入字段数据
    var formData = {};
    $('.eBlock input').each(function() {
        // 用输入框的name或id作为键，值为用户输入内容
        var key = $(this).attr('name') || $(this).attr('id');
        if (key) {
            formData[key] = $(this).val();
        }
    });

    $.ajax({
        url: 'writeJson.php',
        type: 'POST',
        data: formData, // 传递整理好的键值对数据
        dataType: 'json',
        success: function(result) { // 修正拼写错误
            console.log('提交成功，返回结果:', result);
            // 这里可以加提交成功后的逻辑，比如提示用户
        },
        error: function(xhr, status, error) {
            console.error('提交失败:', error);
            // 处理失败情况
        }
    });
});

第二步：给动态生成的输入框加name属性

在getExerciseBlock以及相关的输入生成函数（比如getWordInput、getWordPartInput）里，给每个输入框加上name属性，这样收集数据更规范：

function getExerciseBlock(i){
    var eBlock = $('<div/>',{
        'id': i,
        'class': 'col-md-12 eBlock'
    });
    
    // 示例：修改getWordInput函数，添加name属性
    function getWordInput(blockId) {
        return $('<input/>', {
            'type': 'text',
            'name': 'word_' + blockId, // 唯一的name属性
            'id': 'word_' + blockId,
            'placeholder': '输入单词'
        });
    }

    $(eBlock).append(
        getRemoveBtnExercise(i), 
        getAudioBtn(i), 
        getWordInput(i), 
        getWordPartInput(i), 
        getWordPartInput(i), 
        getRemoveBtn(i), 
        getAddBtn(eBlock, i)
    );
    return eBlock;
}

第三步：先验证后端是否收到数据

在writeJson.php里先添加调试代码，确认数据是否传达到后端：

<?php
// 先打印POST数据，确认是否收到
var_dump($_POST);
// 后续再处理写入JSON文件的逻辑
?>

这样你可以先在浏览器控制台里看AJAX请求的返回，确认数据已经传递，再处理写入JSON的逻辑。

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