使用JavaScript和Ajax无法提交动态生成表单的问题求助

看起来你遇到的核心问题是数据传递逻辑错误，加上变量作用域的问题，导致Ajax根本没正确发送表单数据。咱们一步步来修复：

首先看最关键的两个问题 #

1. eBlock变量拿不到：你在getExerciseBlock里定义的eBlock是函数局部变量，saveExercise函数根本访问不到它，所以Ajax的data参数其实是无效的，这肯定提交失败。
2. 直接传DOM对象给Ajax：就算能拿到eBlock，把DOM元素直接传给data也不对——Ajax需要的是键值对格式的数据（比如对象、FormData或者序列化字符串），不是DOM节点。

修复方案：正确收集表单数据 #

根据你的场景，给你两种可行的方法：

方法一：序列化整个表单（最简单） #

如果你的动态输入控件都加了name属性，直接用jQuery的serialize()就能一键收集所有表单数据：

function saveExercise() {
  // 序列化整个表单的所有带name属性的控件
  var formData = $('#my_form').serialize();
  
  $.ajax({
    url: 'saveJson.php',
    type: 'POST',
    data: formData,
    dataType: 'json'
  }).done(function (response) {
    window.location = 'index.php';
  }).fail(function(xhr, status, error) {
    // 加上失败回调，方便排查问题
    console.log('Ajax请求失败:', error);
    console.log('后端返回内容:', xhr.responseText);
  });
}

⚠️ 注意：动态生成的输入框必须加name属性，比如<input name="word[]" ...>，否则serialize()会忽略它们。

方法二：手动收集.eBlock内的数据 #

如果只需要收集动态生成的.eBlock里的内容，可以遍历每个区块来构建数据对象：

function saveExercise() {
  var exerciseList = [];
  
  $('.eBlock').each(function (index, block) {
    // 从当前区块里获取各个输入值，这里要根据你实际的控件类名/name调整
    var exerciseData = {
      word: $(block).find('.exerciseGetWordInput_' + index).val(),
      part1: $(block).find('.wordPartInput').eq(0).val(),
      part2: $(block).find('.wordPartInput').eq(1).val()
      // 其他需要的字段都在这里补充
    };
    exerciseList.push(exerciseData);
  });
  
  $.ajax({
    url: 'saveJson.php',
    type: 'POST',
    data: { exercises: exerciseList }, // 把数组包装成对象传给后端
    dataType: 'json'
  }).done(function (response) {
    window.location = 'index.php';
  }).fail(function(xhr, status, error) {
    console.log('请求出错:', error);
    console.log('后端返回:', xhr.responseText);
  });
}

额外的优化建议 #

1. 绑定按钮事件更可靠：别用内联onclick，用jQuery绑定事件，尤其是涉及动态元素时（你的按钮是静态的，这么做也更规范）：

$(document).ready(function() {
  // 你的其他代码...
  
  // 给保存按钮绑定点击事件
  $('#saveBtn').on('click', saveExercise);
});

2. 排查后端问题：如果前端数据传对了还是失败，去检查saveJson.php：
   • 确认能正确接收POST数据（用$_POST接收序列化的表单，或者用file_get_contents('php://input')解析JSON）
   • 确保后端返回的是合法的JSON格式，没有语法错误
   • 查看PHP错误日志，看是否有服务器端报错

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