Странный ответ ajax

Question

Я вызываю sortMovie() функцию ajax, когда пользователь меняет выпадающий список. Это работает, но я получаю странный вывод. Ответ ajax загружает один и тот же шаблон дважды. Я думаю, что это из-за return render_to_response('movie/movie_list.html',{'movies':movies})

Кто-нибудь может мне помочь? Вот скриншот вопроса. Спасибо.

Код раскрывающегося списка:

<select name="movielist" onchange="sortMovie(this.value)">
  <option value="">Choose</option>
  {% for category in categories %}
  <option value="{{ category.id}}">{{category.name}}</option>
  {% endfor %}                    
</select>

Код с вида:

def movie_sort(request):
    try:
        movies = Movie.objects.filter(language=request.GET.get('q'))
    except:
        movies = Movie.objects.all()
    return render_to_response('movie/movie_list.html',{'movies':movies})

И Аякс:

function sortMovie(str)
{
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } 

  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "/moviesort/?q=" + str, true);
  xmlhttp.send();
}

Редактировать: Вот mybase . Вот мой movie_details.htm . Последний из них movie_list.html Обновление: Я нашел, если я удалил {% extends 'base.html' %} из movie_list.html'. Then It worked. So It mean I have to create different template` для этого представления.

Answer 1

Судя по скриншоту, который вы опубликовали, и по вашему комментарию, похоже, что вся страница вставляется в innerHTML тега, который вы обновляете.Проблема в том, что либо запрос ajax перезагружает всю страницу, либо HTML-код, полученный от вызова ajax, содержит больше разметки, чем вы ожидаете.

Судя по опубликованным источникам, последний кажетсяслучай: удалите {% extends 'base.html' %} из movie_list.html, и все должно быть в порядке.

Answer 2

Ну да. Ваш Ajax публикует в том же представлении, что и исходная страница, а представление просто возвращает обработанный шаблон, который ваш Javascript добросовестно вставляет на страницу.

Ваше представление должно проверять Ajax-запрос и возвращать JSON, а не визуализированный шаблон. Обычно вы используете request.is_ajax(), но этот флаг не будет установлен, так как вы не используете библиотеку JS (которой вы действительно должны быть в наши дни). Возможно, вам будет проще использовать отдельное представление только для вашего Ajax-запроса и вернуть оттуда JSON.