title: why after use Bootstrap4, Ajax is not a function?
body: <p>CND links I imported from Bootstrap's official website:</p>
  <pre><code> &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot;
      integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot;
      integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js&quot;
      integrity=&quot;sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>They've always been normal, when I build website layouts and components...
  Next up is an ajax example I saw on a website(there's nothing wrong with it on the surface):</p>
  <pre><code>$(document).on(&quot;submit&quot;, &quot;#info-form&quot;, function(e) {
      e.preventDefault();
  
      var scrf = $(&quot;input[name=csrfmiddlewaretoken]&quot;).val();
  
      var infos = $(this).serialize();
      
      $.ajax({
          type: 'POST',
          url: '/user/',
          data: {
              infos: infos,
              csrfmiddlewaretoken: scrf,
          },
          success:function(){
              alert(&quot;SUCCESS!&quot;);
          }
      });
  });  
  </code></pre>
  <p>There is no problem with the site display at this point, but when I trigger the submit event, an error like this occurs ↓</p>
  <p><img src="https://i.stack.imgur.com/L1sgf.png" alt="error " /></p>