页面change事件无法触发Ajax请求 相关交互功能运行异常求助

修复方案 #

核心错误 #

你的代码语法存在低级错误：$.ajax()调用结尾多写了一个多余的分号，直接中断了链式调用，导致.done()回调无法正确绑定到Ajax请求上，自然不会触发弹出提示的逻辑。

修正后可直接运行的代码 #

$("#diary").bind('input propertychange', function() {
  $.ajax({
    method: "POST",
    url: "connectDatabase.php",
    data: {
      content: $("#diary").val()
    }
  })
  .done(function(msg) {
    alert("Data Saved: " + msg);
  });
});

优化建议 #

• 若你使用的jQuery版本≥1.7，更推荐用官方推荐的.on()代替已废弃的.bind()方法，写法仅需修改第一行：

  $("#diary").on('input propertychange', function() {
  

• 建议补充错误捕获逻辑，方便排查后端接口异常问题：

  $("#diary").on('input propertychange', function() {
    $.ajax({
      method: "POST",
      url: "connectDatabase.php",
      data: {
        content: $("#diary").val()
      }
    })
    .done(function(msg) {
      alert("Data Saved: " + msg);
    })
    .fail(function(xhr, status, error) {
      alert("请求失败，错误信息：" + error);
    });
  });
  

• 输入事件触发频率极高，每输入一个字符就发请求会给服务器带来不必要压力，建议加防抖处理，比如用户停止输入300ms后再发送请求：

  let postTimer = null;
  $("#diary").on('input propertychange', function() {
    clearTimeout(postTimer);
    postTimer = setTimeout(() => {
      $.ajax({
        method: "POST",
        url: "connectDatabase.php",
        data: {
          content: $("#diary").val()
        }
      })
      .done(function(msg) {
        alert("Data Saved: " + msg);
      });
    }, 300);
  });
  

内容的提问来源于stack exchange，提问作者Abdul Haseeb Ahmad Bashir