Ajax函数senddocu未定义问题及Send按钮事件绑定求助

先帮你逐个排查问题，你遇到的ReferenceError: senddocu is not defined和后续的功能问题，主要是由语法错误、作用域、数据类型不匹配这几个点导致的，咱们一步步来解决：

1. 修复Ajax代码的语法错误与逻辑问题 #

你的Ajax代码里有几个明显问题：

• success回调函数后面缺少逗号，导致语法报错，进而整个函数定义失败
• console.log(response)放在了$.ajax()的参数外面，而且在success回调之外，此时response还未定义，也会报错
• 你设置了dataType: "json"，但PHP输出的是HTML片段，这会导致jQuery尝试把HTML解析成JSON时失败，直接进入error回调（你没写error回调所以没看到报错）
• URL路径错误："localhost/htdocs/send.php"应该加上http协议，改成"http://localhost/htdocs/send.php"，或者用相对路径（比如如果当前页面和send.php在同一目录，直接写"send.php"）

修正后的Ajax函数：

// 确保函数在全局作用域，或者后续用jQuery绑定事件
function senddocu(selected) {
  $.ajax({
    type: "POST",
    data: {staff: $(selected).val()},
    url: "http://localhost/htdocs/send.php", // 修正路径
    dataType: "html", // 改成html，匹配PHP的输出类型
    success: function(response) {
      $("#responsecontainer").html(response);
      console.log(response); // 把console.log移到success内部，此时response已定义
    },
    // 建议加上error回调方便调试
    error: function(xhr, status, error) {
      console.error("请求出错：", error);
    }
  });
}

2. 解决senddocu is not defined的作用域问题 #

如果你的senddocu函数是写在$(function(){})或者其他闭包里面的，那它属于局部函数，HTML里的onchange="senddocu(this)"找不到它。解决方法有两种：

• 把函数放在全局作用域（比如直接写在<script>标签里，不要嵌套在jQuery的ready函数里）
• 改用jQuery绑定事件，代替HTML里的内联事件（更推荐，分离HTML与JS逻辑）：

$(function(){
  // 给下拉框绑定change事件
  $("select[name='staff']").on("change", function() {
    senddocu(this);
  });
  
  // 这里的senddocu可以是局部函数
  function senddocu(selected) {
    // 上面修正后的Ajax代码
  }
});

3. 实现Send按钮触发函数的功能 #

要让按钮点击时触发函数，你可以用两种方式实现：

方法1：内联onclick（快速实现） #

修改HTML的按钮：

<button type="button" onclick="senddocu(document.querySelector('select[name=staff]'));">Send</button>

方法2：jQuery绑定（更规范） #

$(function(){
  $("button").on("click", function() {
    var selectElement = $("select[name='staff']")[0];
    senddocu(selectElement);
  });
  
  // 这里放senddocu函数
});

4. 修正PHP代码的逻辑匹配问题 #

你的PHP里判断的是$_POST["staff"]=="sir"，但下拉框里没有这个选项（只有chief和user），可以改成user，避免逻辑失效：

<?php
echo "<div id='responsecontainer'>";
if($_POST["staff"]=="chief") {
  echo "Document Sent!";
} else if($_POST["staff"]=="user") { // 改成user，对应下拉框的选项值
  echo "You got mail!";
}
echo "</div>";
?>

最后调试建议 #

• 打开浏览器的开发者工具（F12），切换到Console标签，查看是否还有语法报错
• 切换到Network标签，查看Ajax请求的状态码和返回内容，确认请求是否成功发送到PHP文件

按照上面的步骤修改后，应该就能解决你的问题了。

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