onclick调用email()提示is not a function，无法触发AJAX请求求助

嘿，我来帮你排查这个问题～出现email() is not a function错误的核心原因是作用域不匹配：

你把email()函数定义在了$(document).ready()的回调函数内部，这意味着这个函数是回调函数的局部函数，只能在这个回调函数内部访问。而HTML按钮的onclick="email()"是在全局作用域下去查找这个函数，自然找不到它，所以会报错。

下面给你几种可行的解决方案：

方案1：将函数移到全局作用域 #

把email()函数从$(document).ready()里面挪出来，让它成为全局函数，这样onclick就能正常访问了：

// 定义在全局作用域
function email() {
  var emailUrl = "../assets/php/email_form_processing.php";
  $.ajax({
    url: emailUrl,
    method: 'post',
    data: $('#email_form').serialize(),
    dataType: 'json', // 注意这里首字母要大写，原代码写的datatype是错误的
    success: function(result) {
      if (result) {
        alert("Email sent successfully");
      } else {
        alert("Failed!");
      }
    },
    error: function(error) {
      alert(error);
    }
  });
}

$(document).ready(function() {
  // 这里放其他需要DOM加载完成后执行的代码
});

方案2：改用jQuery事件绑定（推荐） #

这是更符合jQuery最佳实践的方式，去掉HTML里的onclick属性，通过jQuery来绑定点击事件，这样函数可以保持在局部作用域内：

首先修改HTML，移除onclick：

<input type="button" id="email_submit" name="sendmail" class="btn btn-info" value="Send">

然后在$(document).ready()内部绑定事件：

$(document).ready(function() {
  function email() {
    var emailUrl = "../assets/php/email_form_processing.php";
    $.ajax({
      url: emailUrl,
      method: 'post',
      data: $('#email_form').serialize(),
      dataType: 'json', // 修正大小写
      success: function(result) {
        if (result) {
          alert("Email sent successfully");
        } else {
          alert("Failed!");
        }
      },
      error: function(error) {
        alert(error);
      }
    });
  }

  // 给按钮绑定点击事件
  $('#email_submit').click(email);
  // 或者用.on()写法：$('#email_submit').on('click', email);
});

方案3：将函数挂载到window对象（不推荐，避免全局污染） #

如果你一定要保留HTML里的onclick，可以把email()函数挂载到window对象上，强制让它成为全局函数：

$(document).ready(function() {
  window.email = function() {
    var emailUrl = "../assets/php/email_form_processing.php";
    $.ajax({
      url: emailUrl,
      method: 'post',
      data: $('#email_form').serialize(),
      dataType: 'json', // 修正大小写
      success: function(result) {
        if (result) {
          alert("Email sent successfully");
        } else {
          alert("Failed!");
        }
      },
      error: function(error) {
        alert(error);
      }
    });
  };
});

额外小提示 #

原代码里的datatype是拼写错误，应该是dataType（首字母大写T），这个错误可能会导致AJAX无法正确解析JSON返回值，记得修正哦～

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