Ajax如何等待用户输入？代码未获取输入且DOM元素为空

1. 解决document.getElementById返回null的问题 #

• 检查HTML中是否存在id为movie和year的输入元素，确保id拼写完全一致（大小写敏感）。
• 确保JS代码在DOM加载完成后执行：要么把script标签放在</body>之前，要么用DOMContentLoaded事件包裹代码：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有JS逻辑放在这里
  });
  

2. 解决程序未等待用户输入就执行的问题 #

当前代码页面一加载就自动调用returnText()，完全没触发用户交互。需要把Ajax请求绑定到用户操作事件上，比如按钮点击：

修改后的完整代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  // 绑定提交按钮的点击事件（假设按钮id为submit-btn）
  const submitBtn = document.getElementById('submit-btn');
  submitBtn.addEventListener('click', function() {
    returnText().done(function(response) {
      console.log('请求成功:', response);
    }).fail(function(error) {
      console.error('请求出错:', error);
    });
  });
});

function returnText(){
  let movie = document.getElementById("movie").value;
  let year = document.getElementById("year").value;
  const dict_values = {movie, year};
  const s = JSON.stringify(dict_values);
  console.log(s);
  // 注意：s已经是JSON字符串，无需再次JSON.stringify
  return $.ajax({
    url:"/test",
    type:"POST",
    contentType: "application/json",
    data: s
  });
}

配套HTML示例 #

<input type="text" id="movie" placeholder="输入电影名">
<input type="text" id="year" placeholder="输入年份">
<button id="submit-btn">提交</button>

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