Ajax GET请求阻止表单POST提交问题排查求助

核心问题是异步操作的时序错误：

• $.getJSON 是异步请求，调用后会立刻往下执行代码，不会等后端返回结果。
• 当前代码里，ufees 先调用 getrate 发起Ajax请求，紧接着就执行 submitForm 提交表单。这时候Ajax还没完成，表单的rate、fee字段还没更新，而且表单提交会触发页面跳转，直接中断未完成的Ajax请求，甚至导致浏览器无法正常处理提交动作。

必须等Ajax请求完成、表单字段更新完毕后，再执行表单提交。下面是两种可行的修改方式：

方式1：给getrate加回调函数 #

调整getrate，让它在Ajax回调完成后再执行提交逻辑：

document.getElementById("add").addEventListener("click", function(){
  ufees(submitForm);
}, true);

function ufees(callback) {
  // 把提交函数作为回调传给getrate
  getrate(callback);
}

function submitForm() {
  document.getElementById("myForm").submit();
}

function getrate(callback) {
  var send = {
    category: category.val(),
    clientname: clientname.val(),
    billable: billable.val(),
    timeUser: timeUser.val()
  };

  $.getJSON("/time/rate", send, function (response) {
    // 先更新表单字段
    document.getElementById("rate").value = response.rate;
    document.getElementById("fee").value = (document.getElementById("hours").value * response.rate).toFixed(2);
    if (response.edit_fee === '1') { 
      document.getElementById("fee").removeAttribute('readonly'); 
    } else { 
      document.getElementById("fee").setAttribute('readonly', true); 
    }
    // 字段更新完，再执行提交
    if (typeof callback === 'function') {
      callback();
    }
  });
}

方式2：用Promise封装异步逻辑（更现代的写法） #

如果你的环境支持Promise，可以用它来更清晰地处理异步流程：

document.getElementById("add").addEventListener("click", async function(event){
  event.preventDefault(); // 阻止按钮默认提交行为，避免冲突
  // 等getrate执行完再提交
  await getrate();
  submitForm();
}, true);

function submitForm() {
  document.getElementById("myForm").submit();
}

function getrate() {
  return new Promise((resolve) => {
    var send = {
      category: category.val(),
      clientname: clientname.val(),
      billable: billable.val(),
      timeUser: timeUser.val()
    };

    $.getJSON("/time/rate", send, function (response) {
      document.getElementById("rate").value = response.rate;
      document.getElementById("fee").value = (document.getElementById("hours").value * response.rate).toFixed(2);
      if (response.edit_fee === '1') { 
        document.getElementById("fee").removeAttribute('readonly'); 
      } else { 
        document.getElementById("fee").setAttribute('readonly', true); 
      }
      // 异步操作完成，触发后续逻辑
      resolve();
    });
  });
}

• 如果你的add按钮是表单内的<button type="submit">，一定要加event.preventDefault()阻止默认提交行为，避免和手动提交逻辑冲突。
• 检查category、clientname等变量是否是正确的jQuery对象（因为用了.val()），避免因为参数错误导致Ajax请求失败，进而让后续提交逻辑不执行。

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