django中的Ajax过滤器未在HTML中显示

Question

我不确定我的Ajax实现是否正确。 使用Django内置标签，我使用Ajax传递的对象未显示在模板HTML页面上。

view_results.html

<div>
   <input id="search" name="search" type="text" class="query-search form-control input-sm" style="width:350px;" placeholder="Search trail name...">
</div>
<div class="overflow">
   <div class="list-group">
      {% if results|length %}
        {% for r in results %}
           <a href="#" class="list-group-item"><strong>{{ r.trail_id }}</strong> <br> {{ r.trail_long }}</a>
        {% endfor %}
      {% else %}
          Not found
      {% endif %}
   </div>
</div>

Java脚本

$(function() {
    $('#search').keyup(function() {

        $.ajax({
            type: "GET",
            url: "/search/get_trail/",
            data: {
                'search_text' : $('#search').val()
            },
            success: function(data){console.log(data)},
            dataType: 'html'
        });
    });
  });

views.py

def trails_view(request):
   trails = Trail.objects.all()
   trails_json = serialize('geojson' , trails, fields=('trails_type', 'trails_id', 'wkb_geometry',))
   trails_geojson = json.loads(trails_json)
   trails_geojson.pop('crs', None)
   trails_geojson = json.dumps(trails_geojson)

   return render(request, '/view_trails.html', {'trails':trails,
                                             'trails_geojson':trails_geojson})

def get_trails(request):
    if request.method == "GET":
        search_text = request.GET['search_text']
        if search_text is not None and search_text != u"":
            search_text = request.GET['search_text']
            results = Trail.objects.filter(trails_id__contains=search_text)
        else:
            results = []

        return render(request, '/view_trails.html', {'results': results})

urls.py

url(r'^view/', views.trails_view, name='trails_view'),
url(r'^search/get_trails/', views.get_trails, name='get_trails'),

我想知道是否trails_view和get_trails是该函数在ajax调用后未显示结果的原因。 我尝试在views.py打印出results的内容，并且确实根据search_text进行了过滤。 问题是模板标签中没有显示内容。

我想做这样的事情： 简单的Ajax搜索

我究竟做错了什么？

Answer 1

模板是在服务器端呈现的，而JavaScript是在浏览器端执行的，因此仅从浏览器进行ajax调用将不会自动更新浏览器中已呈现的html代码。 这就是成功回调的含义：让您使用ajax调用发回的内容来更新DOM。

你问：

然后，我想我的问题是如何获取响应并将其用于标签{％for r in results％}中，还是不能

简短的回答是“你不能”。

重新阅读上面的内容：进行ajax调用时，原始模板已呈现为纯html，并且此html已作为响应正文发送到浏览器，因此此处不再有模板或templatetags。 此时，您所拥有的只是http响应的正文和当前页面的DOM。

现在，为您的ajax调用服务的视图仍可以返回由模板生成的html（当前代码似乎是这种情况），因此您可以轻松地从响应的主体html中构建一个dom对象，并从中提取相关节点。此dom，并用这些节点替换当前页面的dom。