Использование Ajax и Django - правильный способ передать json обратно на страницу шаблона - PullRequest
Новая
       30

Использование Ajax и Django - правильный способ передать json обратно на страницу шаблона

0 голосов
/ 28 мая 2020

Я новичок во всем javascript и ajax, Python и Django, я обычно могу делать простые вещи, чтобы показать данные модели на веб-странице и заполнить формы и т.д. c.

Я просто пытаюсь понять, как Django, python и javascript работают вместе, и подумал, что попробую использовать jvectormap в качестве обучающего примера. Когда мышь перемещается по карте, Ajax отправляет код страны и название страны в представление, и представление обновляет модель и записывает, где пользователь щелкнул. Затем под картой отображается код страны и название страны. Это работает.

Я также хочу отправить животных из той страны, которая была выбрана, обратно в шаблон и показать их под картой. Я использую фильтр кода страны модель National_Animals. В наборе запросов может быть несколько животных для страны и преобразовать их в список в json.

Меня беспокоит, как отправить эту информацию (список json животных) обратно в шаблон. В сценарии на странице шаблона у меня есть «search_term» и «the_name», перечисленные в данных ajax. Нужно ли мне перечислять все ключевые слова для животных, которых я хочу отправить обратно? Или иметь вторую форму и ajax заявление.

Страница шаблона: 

<div class="container p-0">
  <div class=map-container>
  <div id="world-map" style="height: 400px"></div>
  <script>
    $(function() {
      $('#world-map').vectorMap({
        map: 'world_mill_en',
        onRegionClick: function(event, code) {
          var message = (code);
          var the_url_is = "{% url 'mainapp:home2' %}";
          var map = $('#world-map').vectorMap('get', 'mapObject');
          var my_name=map.getRegionName(code);
          document.getElementById("country_code").innerHTML = code;
          document.getElementById("country_name").innerHTML = my_name;

          // now try ajax
          $.ajax({
            url: '/mainapp/video/search',
            data: {
              'search_term': code,
              'the_name':my_name,
            },
            dataType: 'json',
            success: function(data) {
              $('#world_map').text(data['Hello']);
            }
          });
          // // alert( code );
          // if (code == 'RU') {
          //   window.location.assign(the_url_is)
          }

        }
      });
    });
  </script>
    <a> The Country is: </a> <a id='country_name'></a> <a>    --  </a> <a id='country_code'></a>
<a id ='my_animals'></a>
</div>
</div>
</body>
</html>

Модели: 

class Country_List(models.Model):
    country_code=models.CharField(max_length=255, default="")
    country_name = models.CharField(max_length=255, default="unknown")

class National_Animals(models.Model):
    creature_types = [
    ('animal', 'Animal'),
    ('bird','Bird'),
    ('reptile','Reptile'),
    ('fish', 'Fish'),
    ('insect','Insect'),
    ('mythical','Mythical'),
    ('unknown','Unknown')
    ]
    country_code=models.CharField(max_length=3, default="")
    country_name = models.CharField(max_length=100, default="unknown")
    creature=models.CharField(max_length=100, default="unknown")
    creature_type = models.CharField(max_length=20, choices=creature_types, default="unknown")
    latin_name=models.CharField(max_length=100, default="unknown")
    thumb_image=models.ImageField(upload_to='static/images/',default='static/images/default.png')

В представлении есть дополнительные операторы печати, так как я пытался убедиться, что json был прав: 

def video_search(request):
    countries_clicked=Country_List()
    search_form=SearchForm(request.GET)
    print('the request.get is ',request.GET)
    if search_form.is_valid():
        print('the request.get is ',request.GET)
        print('printing in terminal',search_form.cleaned_data['search_term'])
        print('printing in terminal',search_form.cleaned_data['the_name'])
        countries_clicked.country_code=search_form.cleaned_data['search_term']
        countries_clicked.country_name=search_form.cleaned_data['the_name']
        countries_clicked.save()
        the_last_code=Country_List.objects.last().country_code
        the_model=National_Animals.objects.filter(country_code=the_last_code).values()
        print(the_model)
        the_model_list=list(the_model)
        print(the_model_list)
        the_json_to_return = json.dumps(the_model_list)
        print('this is the json')
        print('')
        print(the_json_to_return)
        return JsonResponse({'Hello':the_json_to_return})
    return JsonResponse({'Hello':'Not Working'})

Пример json, который я хотел показать под картой: 

[{"id": 522, "country_code": "US", "country_name": " United States", "creature": "Bald eagle (national bird)", "creature_type": "Bird", "latin_name": "Haliaeetus leucocephalus", "thumb_image": "static/images/default.png"}, {"id": 523, "country_code": "US", "country_name": " United States", "creature": "American bison (national mammal)", "creature_type": "Animal", "latin_name": "Bison bison", "thumb_image": "static/images/default.png"}]
...