出现jQuery.ajax is not a function类型错误，请求排查问题原因

我来帮你揪出代码里的问题啦！你的AJAX调用触发错误主要有两个核心原因：

1. 重复引入jQuery导致功能缺失 #

你在页面里先后引入了两个jQuery版本：

• <head>里是完整功能的jQuery 3.2.1
• 页面末尾又引入了jQuery Slim 3.1.1

Slim版是jQuery的精简版本，砍掉了AJAX、动画这些非核心模块，而且后面引入的版本会覆盖前面的完整版本——这就导致你调用AJAX时，找不到对应的方法，直接触发错误。

2. AJAX调用的写法有误 #

你写的logResp.ajax({...})是错的，ajax是jQuery的全局方法，正确写法应该是$.ajax({...})；另外如果只是想把food-hygiene.html的内容加载到指定元素里，用load()方法会更简单。

修复后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container-fluid"> 
        <div class="content-wrapper"> 
            <div id="food-hygiene">Loading...</div> 
        </div> 
    </div> 

    <!-- 只保留一个完整版本的jQuery，放在Bootstrap相关脚本之前 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    <script> 
        $( document ).ready(function() {
            // 方案一：用标准的$.ajax写法
            $.ajax({
                url: "food-hygiene.html",
                async: true, // 强烈建议不要用async:false，会卡死页面
                type: "GET",
                dataType: "html" // 这里应该写html，不是string
            }).done( function(data) {
                $('#food-hygiene').html(data); // 把内容插入到目标元素
                alert(data);
            }).fail(function() {
                $('#food-hygiene').html("加载失败，请重试"); // 增加错误处理
            });

            // 方案二：更简洁的load方法，直接加载内容到元素
            // $('#food-hygiene').load('food-hygiene.html', function(response, status, xhr) {
            //     if (status === "error") {
            //         $(this).html("加载失败，请重试");
            //     }
            // });
        }); 
    </script> 
</body> 
</html>

几个小建议 #

• 别用async: false，同步AJAX会阻塞浏览器渲染，用户会觉得页面卡
• dataType要和响应内容匹配，加载HTML页面就写html，jQuery会自动处理
• 尽量把JS脚本放在<body>末尾，这样DOM加载完成后再执行，也不会阻塞页面渲染

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