运行jQuery自动补全功能报500内部服务器错误的解决方案有哪些？

1 客户端代码已知错误修正 #

你给出的JS代码存在两处直接导致请求异常的低级错误：

• ContentType 拼写错误：jQuery ajax的请求头参数为全小写开头的contentType，同时字符集配置错误，原代码中charset-utf-8应为charset=utf-8
• 不必要的手动取值：autocomplete的source回调自带request.term属性，直接可以拿到输入框当前输入值，不需要手动获取DOM节点值，避免取值时机偏差

修正后的前端代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../Scripts/jquery-ui.js"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
    $("#txtautocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "../EmployeeService.asmx/GetAllEmpBYName",
                method: "post",
                data: JSON.stringify({ term: request.term }),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                }, 
                error: function (err) {
                    console.log(err);
                    // 生产环境去掉alert，用控制台看完整错误信息
                }
            });
        }
    });
});
</script>

2 后端服务常见500错误排查点 #

500错误属于服务器内部执行错误，优先检查ASMX服务配置：

• 检查GetAllEmpBYName接口的入参名称是否和你传的term完全一致，大小写也要匹配
• 接口方法是否添加了[WebMethod]、[ScriptMethod(ResponseFormat = ResponseFormat.Json)]特性
• web.config中是否开启了ASMX的POST请求权限，配置参考：

<system.web>
  <webServices>
    <protocols>
      <add name="HttpPost"/>
      <add name="HttpGet"/>
    </protocols>
  </webServices>
</system.web>

• 直接在浏览器地址栏访问../EmployeeService.asmx测试服务是否能正常打开，再手动调用GetAllEmpBYName方法传参测试接口本身是否有逻辑报错

3 调试建议 #

打开浏览器F12控制台，切换到「网络」标签，找到发送到GetAllEmpBYName的请求，查看请求体参数、响应详情里的报错堆栈，可以直接定位具体报错原因。

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