Блог

Главная - Вопросы по программированию - $.ajax() не является функцией, даже при установленном обычном jQuery

$.ajax() не является функцией, даже при установленном обычном jQuery

#javascript #html #jquery #twitter-bootstrap #ejs

#javascript #HTML #jquery #twitter-bootstrap #ejs

Вопрос:

Я пытался использовать ajax на своей странице, но когда я пытаюсь использовать функцию ajax, я получаю сообщение об ошибке $.ajax() is not a function .

Я немного прочитал об этом в Stackoverflow и нашел несколько потоков, в которых говорилось, что мне нужно использовать не-slim версию 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>

Я получил <script бирку непосредственно от https://code.jquery.com amp; использовал опцию «несжатый».

Любая помощь будет с благодарностью принята, спасибо!

Комментарии:

1. Вы кэшируете? Существует ли на странице более одной версии jQuery?

2. Проверяли ли вы сетевые запросы, чтобы убедиться, что файл сценария выдает вам ответ 200?

3. Используйте инструмент разработчика браузера «Сеть», чтобы увидеть, какие HTTP-запросы выдаются при загрузке вашей страницы.

4. @Pointy Я только что посмотрел на сетевой тег, я вижу здесь обе версии bootstrap. Как бы я мог помешать ему сделать это?

Ответ №1:

Оказывается, в моей части «заголовка» все еще была тонкая версия jQuery, и браузер использовал эту версию.

Всем спасибо за помощь!