0

我正在尝试从我的 Django 应用程序获取 JSON 响应，但响应不起作用：

这是我的views.py：

import json
import traceback
from django.http import HttpResponse
from django.template import Context,loader
from django.template import RequestContext
from django.shortcuts import render_to_response
from eScraperInterfaceApp.eScraperUtils import eScraperUtils 

#------------------------------------------------------------------------------

def renderError(message):
    """
        This function displays error message
    """    
    t = loader.get_template("error.html")                
    c = Context({ 'Message':message})
    return HttpResponse(t.render(c))

def index(request,template = 'index.html',
                  page_template = 'index_page.html' ):
    """
        This function handles request for index page 
    """

    try:        
        context = {}
        contextList = []
        utilsOBJ = eScraperUtils()        
        q = {"size" : 300000,
             "query" :{ "match_all" : { "boost" : 1.2 }}}
        results = utilsOBJ.search(q)       

        for i in results['hits']['hits']:

            contextDict = i['_source']            
            contextDict['image_paths'] = json.loads(contextDict['image_paths'])
            contextList.append(contextDict)            

        context.update({'contextList':contextList,'page_template': page_template})     

        if request.is_ajax():    # override the template and use the 'page' style instead.
            template = page_template

        return render_to_response(
            template, context, context_instance=RequestContext(request) )

    except :        
        return renderError('%s' % (traceback.format_exc()))

def search (request,template = 'index.html',
                  page_template = 'index_page.html' ):

    try:
        if request.method == 'POST':        

            context = {}
            contextList = []
            keyWord = request.POST['keyWord']
            print keyWord   
            utilsOBJ = eScraperUtils()
            results = utilsOBJ.search('productCategory:%(keyWord)s or productSubCategory:%(keyWord)s or productDesc:%(keyWord)s' % {'keyWord' : keyWord})
            for i in results['hits']['hits']:
                contextDict = i['_source']
                contextDict['image_paths'] = json.loads(contextDict['image_paths'])   
                contextList.append(contextDict)            

            context.update({'contextList':contextList,'page_template': page_template})
            if request.is_ajax():    # override the template and use the 'page' style instead.
                template = page_template

        return HttpResponse(template, json.dumps(context), context_instance=RequestContext(request),
                                  content_type="application/json")    
    except :        
        return renderError('%s' % (traceback.format_exc()))

#------------------------------------------------------------------------------

索引.html：

<html>
<head>
    <title>Fashion</title>
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>

<form action="">
    {% csrf_token %}
    <input id="query" type="text" />
    <input id="search-submit" type="button" value="Search" />    
</form>

<div class="product_container">
    <ul class="product_list">
        <div class="endless_page_template">
            {% include page_template %}
        </div>
    </ul>
</div>


<div class="product_container">
    <ul class="product_list">
        <div class="endless_page_template">
            {% include page_template %}
        </div>
    </ul>
</div>


{% block js %}
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="static/js/endless_on_scroll.js"></script>
<script src="static/js/endless-pagination.js"></script>    
<script>
    $.endlessPaginate({paginateOnScroll: true,
    endless_on_scroll_margin : 10,
    paginateOnScrollChunkSize: 5
});</script>

<script type="text/javascript"> 
$("#search-submit").click(function() {  
    // Get the query string from the text field
    var query = $("#query").val();
    alert(query);    
    data = { 'csrfmiddlewaretoken': '{{ csrf_token }}', 'keyWord' : query};
    // Retrieve a page from the server and insert its contents
    // into the selected document.    
    $.ajax({
    type: "POST",
    url: '/search/',
    data: data,   
    success: function(context,status){
            alert("Data: " + context + "Status: " + status);
    },
    error: function( error ){
        alert( error );
      },
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    });
});
</script>
{% endblock %}
</body>
</html>

index_page.html ：

{% load endless %}
{% paginate 10 contextList %}
{% for item in contextList %}
    <li >
        <a href="{{ item.productURL }}" ><img src="/images/{{ item.image_paths.0 }}/" height="100" width="100" border='1px solid'/></a>
        <br>
        <span class="price">
        <span class="mrp">MRP : {{ item.productMRP}}</span>
        {% if item.productPrice %}<br>
        <span class="discounted_price">Offer Price : {{ item.productPrice}}</span>
        {%endif%}
        </span>
    </li>  
{% endfor %}

{% show_more "even more" "working" %}

我想要的是获取服务器响应并更新contextList....但它不起作用....

4

1 回答 1

1

您面临的问题是您尝试更新一个名为context_listthis 的 Django 模板编译变量，使用 AJAX 不会神奇地发生，因为 Django 在您最初点击页面时已经预编译了您所服务的 HTML。

您无法规避这一点，但您可以解决它，下面我将向您展示两种方法。

您success()拥有的管理搜索的 jQuery 脚本中的处理程序会获取您重新编译的新 HTML，但您没有在任何地方使用它，所以它不会工作。在这种情况下，您只是将一些内容记录到console. （这将是您使用选项 #2 的地方。）

在我看来，你有两个选择。（这是很多代码，所以我会给你指针而不是实现，不会剥夺你所有的乐趣！）

我会给你一个快速的运行，然后你可以决定你想采取哪种方式。

  1. 您可以使用 jQuerys$.load()方法来获取重新编译的模板。
  2. 您可以使用$.getJSON()和获取 JSON 格式的对象，然后相应地更新 HTML。

第一个选项 - $.load()

#Django
def search_view(keyword, request):
   search_result = SearchModel.objects.filter(some_field=keyword)
   t = loader.get_template("some_result_template.html")                
   c = Context({'search_results':search_result})
   return render(t.render(c))

#jQuery
$("#result").load("url_to_your_search", { 'keyword': 'search_me' } );

第二个选项 - $.getJSON()

#Django
from django.core import serializers

def search_view(keyword, request):
    search_result = SearchModel.objects.filter(some_field=keyword)
    json_data = serializers.serialize('json', search_result)
    return HttpResponse(json_data, mimetype='application/json')

#jQuery
$.getJSON('url_to_your_search_view', { keyword: "search_me" }, function(json_data) {
  var items = [];

  $.each(json_data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

现在 JSON 代码直接取自文档，因此您必须对其进行修改，但您会了解您的代码工作所需的要点。

于 2013-07-18T07:04:49.717 回答