未捕獲的TypeError：$ .ajax不是函數| 在使用最新的完整jQuery版本時

Question

我正在嘗試使某些AJAX功能可以在我的網頁上運行，而我對javascript還是很陌生。 我決定將jQuery作為與Django結合使用的框架。 但是我遇到了一個錯誤：$ .ajax（）不是函數。 我試圖通過多種方式和版本來下載和引用jQuery代碼來修復該錯誤，但是我似乎無法修復該錯誤，有人可以幫助我嗎？

我對JQuery腳本的引用是從https://code.jquery.com/jquery-3.3.1.js下載的HTML文件的開頭部分。

<!-- 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文件中使用的模型的ID號。 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>

然后使用$ j.ajax引用ajax

Answer 2

我不確定您到底想達到什么目的，但是我認為您引用jquery javascript源的方式可能是您的問題開始的地方。 <script type="text/javascript" src="path/to/your/jquery.js"></script>對您來說應該可以。 或者，如果您正在從啟用Internet的計算機上進行開發，最好還是使用CDN（內容交付網絡）。 使用CDN，您所需要做的就是指定路徑，因此<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 。 只要完全加載了jquery並且與其他腳本沒有沖突，您就可以隨意使用ajax函數。 讓我知道是否有幫助。

Answer 3

通過使用JavaScript IIFE （立即調用函數表達式）解決此問題的最佳實踐

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

您可以在准備好的文檔中編寫

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