【发布时间】：2021-03-26 12:45:22
【问题描述】：
我一直在尝试在我的页面上使用 ajax，但是当我尝试使用 ajax 函数时，我收到错误 $.ajax() is not a function。
我在 Stackoverflow 上做了一些关于这个的阅读，发现多个线程说我需要使用非超薄版本的 jQuery 来使用 ajax。
但是，即使我已将完整的 jQuery 添加到我的 <script> 标记中，它仍然显示 $.ajax() 不是函数。
这是我的代码。
<!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 -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<%- include('./partials/newheader.ejs', { user } ) %>
<style>
.card {
width: 50%;
margin: auto;
text-decoration: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.form-control').on('focusout', function() {
$.ajax({
type: "POST",
url: 'http://localhost:8000/fetchUser?userID=788161830857605152',
data: {
},
success: (response) => {
console.log('successful web request')
console.log(response.data);
$('.form-text').css('visibility', 'visible')
},
});
});
});
</script>
</head>
<body>
<a class="btn btn-primary" href="/staff/userFunctions" role="button">Click here to return to the previous page</a>
<% if (infractions) { %>
<div class="accordion" id="infractionsList">
<% let iNum = 0;%>
<% infractions.forEach(i => {%>
<% iNum++ %>
<div class="card">
<div class="card-header" id="heading<%=iNum%>">
<h2 class="mb-0">
<input type="checkbox" style="float: left">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse<%= iNum %>" aria-expanded="true" aria-controls="collapse<%= iNum %>">
<% if (i.type.toLowerCase() === 'mute') {%>
<!--Yellow-->
<span class="badge bg-warning text-dark"><%= i.type.toLowerCase() %></span>
<% } else if (i.type.toLowerCase() === 'kick') {%>
<!-- red-->
<span class="badge bg-danger"><%= i.type.toLowerCase() %></span>
<% } else if (i.type.toLowerCase() === 'warn') {%>
<!-- green-->
<span class="badge bg-success text-dark"><%= i.type.toLowerCase() %></span>
<% } else if (i.type.toLowerCase() === 'ban') {%>
<!-- red-->
<span class="badge bg-danger text-white"><%= i.type.toLowerCase() %></span>
<% } else { %>
<span class="badge bg-secondary text-white"><%= i.type.toLowerCase() %></span>
<% }%>
<span>
<%= i.infractionID %>
</span>
</button>
</h2>
</div>
<div id="collapse<%=iNum%>" class="collapse" aria-labelledby="heading<%=iNum%>" data-parent="#infractionsList">
<div class="card-body">
<div class="card text-center shadow p-3 mb-3 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Date</h5>
<hr>
<p class="card-text"><%= i.dateIssued %></p>
</div>
</div>
<div class="card text-center shadow p-3 mb-3 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Moderator</h5>
<hr>
<p class="card-text"><%= i.responsibleModerator %></p>
</div>
</div>
<div class="card text-center shadow p-3 mb-3 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Reason</h5>
<hr>
<p class="card-text"><%= i.reason %></p>
</div>
</div>
<div class="card text-center shadow p-3 mb-3 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Notes:</h5>
<hr>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Notes:</span>
</div>
<textarea class="form-control" aria-label="Notes"></textarea>
<small class="form-text" style="color: #4bb543; visibility: hidden">Saved</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% }); %>
<%} else { %>
<span>
No infractions.
</span>
<%}%>
</body>
</html>
我直接从https://code.jquery.com 获得了<script 标签并使用了“未压缩”选项。
任何帮助将不胜感激，谢谢！
【问题讨论】：
-
你缓存了吗？页面上是否存在多个版本的 jQuery？
-
您是否检查了网络请求以验证脚本文件是否给了您 200 响应？
-
使用浏览器开发者“网络”工具查看加载页面时发出的 HTTP 请求。
-
@Pointy 我刚刚查看了网络标签，我在这里看到了两个版本的引导程序。我将如何阻止它这样做？
标签： javascript html jquery twitter-bootstrap ejs