Как отобразить данные в таблице из базы данных для поиска по внешнему ключу на той же странице с помощью Ajax в проекте Django?

Я совсем новичок в программировании и пытаюсь решить эту проблему последние два дня и не могу понять, как реализовать ее в соответствии с моими требованиями. Я хочу отображать результаты на той же странице, используя Ajax вместо перенаправления на другую HTML страницу. (Было бы полезно, если бы вы могли объяснить, что вы делаете с командами в вашем решении)

У меня есть база данных PostgreSQL, которую я импортировал в Django models.

class Classrooms(models.Model):
    classroom_id = models.IntegerField(db_column='Classroom_ID', primary_key=True)  # Field name made lowercase.
    standard = models.IntegerField(db_column='Standard')  # Field name made lowercase.
    section = models.TextField(db_column='Section')  # Field name made lowercase. This field type is a guess.
    no_of_students = models.IntegerField(db_column='No_of_students', blank=True, null=True)  # Field name made lowercase.

    class Meta:
        managed = True
        db_table = 'Classrooms'

class Students(models.Model):
    student_id = models.IntegerField(db_column='Student_ID', primary_key=True, unique= True)  # Field name made lowercase.
    student_name = models.CharField(db_column='Student Name', max_length=30)  # Field name made lowercase. Field renamed to remove unsuitable characters.
    phone_no_field = models.BigIntegerField(db_column='Phone No.', blank=True, null=True)  # Field name made lowercase. Field renamed to remove unsuitable characters. Field renamed because it ended with '_'.
    date_of_birth = models.DateField(db_column='Date of Birth')  # Field name made lowercase. Field renamed to remove unsuitable characters.
    address = models.CharField(db_column='Address', max_length=100, blank=True, null=True)  # Field name made lowercase.
    parent = models.ForeignKey(Parents, models.DO_NOTHING, db_column='Parent_ID')  # Field name made lowercase.
    classroomid = models.ForeignKey(Classrooms, models.DO_NOTHING, db_column='ClassroomID', blank=True, null=True)  # Field name made lowercase.

    class Meta:
        managed = True
        db_table = 'Students'


class Exammarks(models.Model):
    id = models.IntegerField(db_column='ID', primary_key=True)  # Field name made lowercase.
    studentid = models.ForeignKey('Students', models.DO_NOTHING, db_column='StudentID')  # Field name made lowercase.
    classroomid = models.ForeignKey(Classrooms, models.DO_NOTHING, db_column='ClassroomID')  # Field name made lowercase.
    science = models.IntegerField(db_column='Science')  # Field name made lowercase.
    maths = models.IntegerField(db_column='Maths')  # Field name made lowercase.
    english = models.IntegerField(db_column='English')  # Field name made lowercase.
    total = models.IntegerField(db_column='Total', blank=True, null=True)  # Field name made lowercase.

    class Meta:
        managed = False
        db_table = 'ExamMarks'

Я хочу отобразить ранговый список класса в порядке убывания 5 лучших студентов по отношению к их общим оценкам в колонке 'total' в ExamMarks. Я хочу отобразить его на той же странице, что и страница поиска моего сайта.

Я использовал перенаправление на другую страницу для отображения результатов, но я хочу, чтобы они отображались на той же странице с помощью Ajax.

На рисунках ниже показано, как я делал это раньше, используя другую страницу. На рисунке показана моя страница поиска

Это из моего html-файла страницы поиска.

<div class="row" style="background-color: grey; padding-bottom:10px">
  <div style="margin:auto; width:35%">
    <h5>Type Classroom ID for rank list</h5>
  </div>
  <div class="row">
    <div class="col-md-8 offset-2">
      <form action="{% url 'ranks' %}" method="GET" role="form">
        <div class="input-group">
          <input name="p" type="number" placeholder="Search" class="form-control form-control-lg" />
          <div class="input-group-append">
            <button class="btn btn-dark btn-lg">Search</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Это из моего html-файла страницы результатов.

<h2 style="font-family:Arial;margin-left: 50px"><u>Class rank list</u></h2>
<div style="width:900px; margin: 50px">
  <table class="table table-bordered">
    <thead>
      <tr class="table-primary">
        <th>Rank</th>
        <th>Student ID</th>
        <th>Student Name</th>
        <th>Total Marks</th>
      </tr>
    </thead>

    {% for a,b in mylis %}
    <tr>
      <td>{{a}}</td>
      <td>{{b.studentid.student_id}}</td>
      <td>{{b.studentid.student_name}}</td>
      <td>{{b.total}}</td>
    </tr>
    {% endfor %}

  </table>
</div>

И это был мой файл views.py.

> def rank_view(request):
>     if 'p' in request.GET:
>         p = request.GET['p']
>         cla= Exammarks.objects.filter(classroomid__classroom_id=p).order_by('-total')
>         Num = [1, 2, 3, 4, 5]
>         mylist = zip(Num, cla)
>         context = {
>            'mylis': mylist,
>            'cl': cla,
>            'nu': Num
>         }
>     return render(request, "authentication/ranks.html", context)
Вернуться на верх