Uncaught ReferenceError: $ is not defined in Javascript

Question

我在尝试使用 ajax 在 django 中提交表单时收到此错误消息，但我无法确定导致此错误的原因。我尝试了很多解决方案，但它们似乎没有按预期工作。这是我的控制台中显示的确切错误：

csrfmiddlewaretoken=tHTBQbePA8SQrkk9SL18uCsPCIYLE5rey9dFd8vKUhlQDYbh2vLNC5Y5gl3QNXue&full_name=&bio=&email=&phone=:39 Uncaught ReferenceError: $ is not defined
    at ?csrfmiddlewaretoken=tHTBQbePA8SQrkk9SL18uCsPCIYLE5rey9dFd8vKUhlQDYbh2vLNC5Y5gl3QNXue&full_name=&bio=&email=&phone=:39:7

index.html

    <title>Django Form Submission</title>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center mt-5">Create Profile</h1>
     <h5 class="text-success text-center"></h5>
      <form class="container mt-5" id="post-form">
        {% csrf_token %}

      <div class="mb-3 mr-5 ">
        <input type="text" class="form-control" id="full_name" name="full_name"  placeholder="Full Name">
      </div>
      <div class="mb-3 mr-5 ">
        <input type="text" class="form-control" id="bio" name="bio" placeholder="Bio">
      </div>
      <div class="mb-3 mr-5 ">
        <input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
      </div>
      <div class="mb-3 mr-5 ">
        <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone">
      </div>
      
      
      <button type="submit" class="btn btn-success">Submit</button>
    </form>
    </div>
    
    <script type="text/javascript">
      $(document).on('submit', '#post-form', function (e) {
        e.preventDefault();
        $.ajax({
          type: 'POST',
          url: '/create',
          data: {
            full_name: $('#full_name').val(),
            bio: $('#bio').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
          },
          success: function (data) {
            ("h5").html(data)
          }
        })
      })
    </script>


  </body>
</html>

views.py

from django.shortcuts import render
from core.models import Profile
from django.http import HttpResponse

def index(request):
    return render(request, 'index.html')

def create(request):
    if request.method == 'POST':
        full_name = request.POST['full_name']
        bio = request.POST['bio']
        email = request.POST['email']
        phone = request.POST['phone']

        new_profile = Profile(full_name=full_name, bio=bio, email=email, phone=phone)
        new_profile.save()
        success = 'Profile Created Successfully for ' + full_name
        return HttpResponse(success)

Answer 1

您的代码段在您的 HTML:

中清楚地使用了 JQuery library, which uses $ as its namespace. You need to "import" this library, for example through the use of a CDN 和适当的 <script> 标签

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

Uncaught ReferenceError: $ is not defined in Javascript

Uncaught ReferenceError: $ is not defined in Javascript

javascript

python

django

ajax

jquery