Question

每当用户更改下拉框时，我都会调用sortMovie() ajax函数。这是有效的，但我得到了一些奇怪的输出。 ajax响应加载相同的模板两次。我认为这是因为return render_to_response('movie/movie_list.html',{'movies':movies})

任何人都可以帮助我吗？这是问题的screenshot。感谢。

下拉代码：

<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})

和ajax：

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。

Answer 1

根据您发布的屏幕截图并根据您的评论判断，似乎会发生整个页面插入您正在更新的标记的innerHTML。问题是，ajax请求重新加载整个页面，或者从ajax调用接收的HTML包含的标记比预期的要多。

根据您发布的来源，后者似乎就是这种情况：从{% extends 'base.html' %}移除movie_list.html，一切都应该没问题。

Answer 2

嗯，是的。您的Ajax发布到与原始页面相同的视图，并且视图只返回您的Javascript忠实插入页面的呈现模板。

您的视图应检查Ajax查询并返回JSON，而不是呈现的模板。通常你会使用request.is_ajax()，但是那个标志不会被设置，因为你没有使用JS库（现在你真的应该这样）。您可能会发现仅为Ajax请求使用单独的视图更容易，并从那里返回JSON。

奇怪的ajax反应

2 个答案: