Django blog comment functionality with Jquery not working, takes me to JSON page instead

So i am building a blog with Django and I am trying to implement a comment functionality with JQuery to avoid a page refresh. I’ve written the codes but when I click on the comment submit button, I get sent to a white page with JSON data. I’ve struggled with this problem for too long and i’m hoping for a solution here. Following are the relevant codes.

in my detail page, this is the html for the comment form:

<div id="comment-container" class="comment-container" style="display: none;">
                      <form id="comment-form" method="post" action="{% url 'article:comment_submit' post.slug %}">
                        {% csrf_token %}
                        <textarea id="comment-textarea"
                        style="font-size: 16px; color: #333; background-color: #f2f2f2; border: 1px solid #ccc; 
                        border-radius: 4px; padding: 8px; outline: none; text-align:left;" name="comment" rows="4" cols="50">
                        </textarea>
                        <button id="submit-comment" style="display: block;" type="button">Submit</button>
                      </form>
                    </div>

still in my detail page is an empty div tag where I intend to prepend/append the comments:

<div id="comments-section">
                    </div>
                

in my main.js, I have:

$(document).ready(function() {
    // Function to submit the comment form using AJAX
    $("#submit-comment").on("click", function(event) {
      event.preventDefault()
      var commentText = $("#comment-textarea").val().trim();
      if (commentText !== "") {
        var formData = $("#comment-form").serialize();
        // Get the comment submission URL from the data attribute
        var commentSubmitURL = "{% url 'article:comment_submit' post.slug %}";
        $.ajax({
          type: "POST",
          url: commentSubmitURL,
          data: formData,
          success: function(response) {
            // Clear the comment textarea after successful submission
            $("#comment-textarea").val("");
            // Render the new comment on the page
            renderComment(response);
          },
          error: function(error) {
            console.log(error);
          }
        });
      }
    });

    // Function to render a new comment on the page
    function renderComment(commentData) {
      var commentHtml = `
        <div class="comment">
          <div class="comment-header">
            <h3>${commentData.user}</h3>
            <span class="timestamp">${commentData.date_posted}</span>
          </div>
          <div class="comment-body">
            <p>${commentData.comment}</p>
          </div>
          <div class="comment-footer">
            <button class="comment-button"><i class="fa-solid fa-comment"></i>Reply</button>
            <button class="like-button"><i class="fas fa-heart"></i>Like</button>
            <button class="like-button"><i class="fa-solid fa-trash"></i>Delete</button>
          </div>
          <div class="child-comments">
            <!-- Child comments go here (if any) -->
          </div>
        </div>
      `;
      $("#comments-section").append(commentHtml);
    }
  });

for my python codes, the following are the relevant ones. In my models.py, I have:

class Post(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    image = models.ImageField()
    title = models.CharField(max_length=255)
    slug = models.SlugField(unique=True, blank=True)
    category = models.ForeignKey(Category, on_delete=models.CASCADE, related_name='posts', default='uncategorized')
    post = models.TextField()
    date = models.DateTimeField(auto_now_add=True)
    likes = models.ManyToManyField(User, blank=True, related_name="post_likes")
    is_edited = models.BooleanField(default=False)

class Comment(models.Model):
    post = models.ForeignKey(Post, related_name='comments', on_delete=models.CASCADE)
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    comment = models.TextField()
    date_posted = models.DateTimeField(auto_now_add=True)

in my urls.py, I have:

path('comment_submit/<str:slug>/', views.comment_submit, name='comment_submit'),

in my views.py, I have:

def comment_submit(request, slug):
    if request.method == 'POST':
        # Get the comment data from the request and save it to the database
        comment_text = request.POST.get('comment')
        # Assuming you have already authenticated the user
        user = request.user
        post = Post.objects.get(slug=slug)
        comment = Comment.objects.create(post=post, user=user, comment=comment_text)
        comment_data = {
            'user': comment.user.username,
            'date_posted': comment.date_posted.strftime('%Y-%m-%d %H:%M:%S'),
            'comment': comment.comment,
        }
        return JsonResponse(comment_data)
    return JsonResponse({'error': 'Invalid request method'})

Please why does it not work as intended?