首页 > 解决方案 > 为什么使用Bootstrap4之后,Ajax就不是一个函数了?

问题描述

我从Bootstrap官网导入的CND链接:

 <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>

它们一直很正常,当我构建网站布局和组件时......接下来是我在网站上看到的一个 ajax 示例(表面上没有任何问题):

$(document).on("submit", "#info-form", function(e) {
    e.preventDefault();

    var scrf = $("input[name=csrfmiddlewaretoken]").val();

    var infos = $(this).serialize();
    
    $.ajax({
        type: 'POST',
        url: '/user/',
        data: {
            infos: infos,
            csrfmiddlewaretoken: scrf,
        },
        success:function(){
            alert("SUCCESS!");
        }
    });
});  

此时站点显示没有问题,但是当我触发提交事件时,出现这样的错误↓</p>

错误

标签: bootstrap-4

解决方案


推荐阅读