Мне нужно извлечь данные из базы данных с помощью ajax в django

#html #mysql #django #ajax #web-development-server

Вопрос:

Мне нужно извлечь данные из базы данных и просмотреть результаты на диаграмме в представлении, диаграммы должны динамически изменяться при изменении значений в базе данных(модель предназначена для получения данных пользователей после отправки опроса

Вот моя модель.

 class Survey(models.Model):

    gender=models.CharField(max_length=200)  
    Age = models.CharField(max_length=200) 
    Nationality=models.CharField(max_length=200) 
    Gorvernate = models.CharField(max_length=200)
    Maritalstatus=models.CharField(max_length=200)
    Employmentstatus=models.CharField(max_length=200)
    children=models.CharField(max_length=200)
    Education =models.CharField(max_length=200)
    IncomePerMonth=models.CharField(max_length=200)

    class Meta:
        db_table = 'form_surey' 
 

Я попробовал это в представлении:

 <script>

$.ajax({
            type: 'GET',
            url: "{% url 'pie-chart' %}",
            data: {{gender}},
            success: function (response) {
                // if not valid user, alert the user
                if(!response["valid"]){
                    alert("Success");
            
                }
            },
            error: function (response) {
                console.log(response)
            }
        });

const labels = ['Male','Female'];
const data = {
  labels: labels,
  datasets: [{
    label: 'Gender',
    backgroundColor: ['rgb(255, 99, 132)',
      'rgb(54, 162, 235)', 
      ],
    borderColor:[ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)',

  ],
    data: {{gender|safe}},
  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {}
};


  // === include 'setup' then 'config' above ===

  var myChart = new Chart(
    document.getElementById('myChart'),
    config
  );



</script>
 

Комментарии:

1. Привет, вам нужна платформа интерфейса, такая как VueJS или React, которая может отслеживать изменения и динамически обновлять их.

2. Вы можете использовать Vue только на одной странице, так что вам не нужно настраивать все интерфейсные приложения, используйте Vue, чтобы активировать вашу страницу, и используйте axios для запроса API.