与 django 中的输出保持在同一个 html 页面上

Question

我希望用户在下拉菜单中选择几个产品，然后在同一页面上显示图表。用户应该能够再次从下拉菜单中选择/取消选择选项，然后刷新它，我想留在同一页面中。 My requirement

我已经编写了代码，但是因为对于 django 中的单独视图，我必须有一个不同的 url，它会转到我的下拉菜单不再工作的指定 url。

我已经渲染了与上面相同的显示页面，只是我的 url 不同。

我怎样才能让它工作并保持在同一个网址中。如果可能，使用输出数据重新加载同一页面。下面是我的代码。

index.html:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Select products:</h3>
            <form id="selectProduct" role="search" method="get" action="{% url 'selectedproducts' %}">
                <select name="parameters[]" data-placeholder="Choose products" class="chosen-select" multiple tabindex="4">
                    {% for p in productnames %}
                        <option value="{{ p.productname }}"> {{ p.productname }} </option>
                    {% endfor %}
                </select><br/>
                <label for="submit"></label><button id="submit" type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
    <div class="row"></div><br />
        <h3> Distribution of sales in the products:</h3>
    </div>
</div>
<p>{{ productList }}</p>

urls.py

url(r'^products/', views.productList, name='index'),
url(r'^selectedproducts/', views.selectedproducts, name='selectedproducts')

view.py

def productList(request):
    productnames = Products.objects.all()
    context = {
        'productnames': productnames,
    }
    return render(request, 'sales/index.html', context)

def selectedproducts(request):
    p = request.GET.getlist('parameters[]')
    context = {
        'productList': p,
    }
    # --- logic later for chart ------
    return render(request, 'sales/index.html', context)

提前致谢。

Answer 1

在 <form id="selectProduct" role="search" method="get" action="{% url 'selectedproducts' %}"> 中更改为 form id="selectProduct" role="search" method="get" action="{% url 'index' %}"> 并混合两个函数，如

def productList(request):
    if request.method == 'GET':
        p = request.GET.getlist('parameters[]')
        k = request.GET('parameters[]')
        productnames = Products.objects.all()
        context = {
            'productList': p, 'productnames': productnames, 'k':k,
        }
        # --- logic later for chart ------    
    else:

        productnames = Products.objects.all()
        context = {
            'productnames': productnames,
        }

    return render(request, 'sales/index.html', context)

这将返回到同一页面，如果方法 get 存在，那么如果不只是显示表单，则使用 selectproduct 再次显示表单。让我知道这是否解决了您的问题

在您的模板中编辑

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Select products:</h3>
            <form id="selectProduct" role="search" method="get" action="{% url 'selectedproducts' %}">
                <select name="parameters[]" data-placeholder="Choose products" class="chosen-select" multiple tabindex="4">
                    {% for p in productnames %}
                        {% if k == p %}
                            <option value=="{{ p.productname }}" selected> {{ p.productname }} </option>
                        {% else%} 
                            <option value="{{ p.productname }}"> {{ p.productname }} </option>
                        {% endif %}
                    {% endfor %}
                </select><br/>
                <label for="submit"></label><button id="submit" type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
    <div class="row"></div><br />
        <h3> Distribution of sales in the products:</h3>
    </div>
</div>
<p>{{ productList }}</p>