Uncaught TypeError: $ .ajax не является функцией |При использовании самой последней полной версии JQuery

Question

Я пытаюсь заставить некоторые функции AJAX работать на моей веб-странице, и я совершенно новичок в javascript. Я решил использовать jQuery в качестве фреймворка в сочетании с Django. Но я столкнулся с ошибкой: $ .ajax () не является функцией. Я пытался исправить ошибку, загружая и ссылаясь на код jQuery несколькими способами и несколькими версиями, но, похоже, я не могу это исправить, может кто-нибудь мне помочь?

Моя ссылка на скрипт JQuery в разделе заголовка моего HTML-файла, загруженного с https://code.jquery.com/jquery-3.3.1.js

<!-- JQuery -->
    <script type="text/javascript" src="{% static 'home/jquery.js' %}"></script>

Файл находится в моей папке myapp / static / myapp, я проверил консоль, и он нашел файл.

Мой вызов ajax:

{% block javascript %}
<script type="text/javascript">
  function finishedbutton(pk) {
    $.ajax({
        url: 'task/mark/',
        data: {
          'taskid': pk
        },
        dataType: 'json',
        success: function (data) {
          if (data.finished) {
          alert("SET AS FINISHED")
          }
          else {
            alert("SET AS NOT FINISHED")
          }
        }
    });
  };
</script>
{% endblock %}

Моя кнопка в моем html-файле, вызывающая функцию:

<button onclick="finishedbutton( '{{task.pk}}' )">
  <div class="taskbutton text-center">
    Fini
  </div>
</button>

Task.pk - это номер модели, которую я использую в своем HTML-файле. Идея функции ajax заключается в том, что кнопка помечает объект «задача» как завершенный. Функция ajax должна передавать файл task.id серверу, который помечает задачу как выполненную без перезагрузки всей страницы.

Мое сообщение об ошибке (отображается не в моей системной консоли, а в консоли из элемента inspect):

Uncaught TypeError: $.ajax is not a function
    at finishedbutton ((index):27)
    at HTMLButtonElement.onclick ((index):115)

Я не знаю, нужно ли это, но вот мои views.py и urls.py:

views.py:

from django.shortcuts import render, redirect
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView
from projects.models import Project, Task
from django.http import HttpResponse, JsonResponse

def MarkTask(request):
    pk = request.GET.get('taskid', None)
    print(request.GET)
    task = Task.objects.get(pk=pk)
    if task.finished == True:
        task.finished = False
    else:
        task.finished = True
    task.save()

    data = {'finished': task.finished}
    return JsonResponse(data)

urls.py:

from django.urls import path
from . import views
from django.contrib.auth.decorators import login_required

urlpatterns = [
    path('task/mark/', views.MarkTask, name='projects-marktask'),
]

Answer 1

Мое значение $ было перезаписано, и по какой-то причине оно также не работало, когда я использовал jQuery.ajax.Вот почему я подумал, что вся эта jQuery не работает.Я закончил тем, что использовал решение @Louys Patrice Bessette, используя .noConflict ()

Это оказалось моим решением:

<!-- JQuery -->
<script type="text/javascript" src="{% static 'home/jquery.js' %}"></script>

<script>
var $j = jQuery.noConflict();
</script>

А затем я ссылался на ajax с помощью $ j.ajax

Answer 2

Лучшая практика для решения этой проблемы с использованием JavaScript IIFE (выражение для немедленного вызова функции)

 (function($) {
    $.ajax({
    //your ajax request
    });
  })(jQuery);

Вы можете написать это в готовом документе

 (function($) {
    $(document).ready(function(){
      $.ajax({
      //your ajax request
      });
    });
 })(jQuery);

Answer 3

Я не совсем уверен, чего именно вы пытаетесь достичь, но я думаю, что способ, которым вы ссылались на источник jquascript jquery, может быть там, где началась ваша проблема.<script type="text/javascript" src="path/to/your/jquery.js"></script> должно быть хорошо для вас.Или лучше использовать CDN (Content Delivery Network), если вы разрабатываете с компьютера, подключенного к Интернету.С CDN все, что вам нужно сделать, это указать путь, таким образом <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>.Пока jquery полностью загружен и нет конфликтов с другими сценариями, вы можете использовать функцию ajax по желанию.Дайте мне знать, если это поможет.