1

我有一个页面，它呈现我的数据库中的对象列表。我需要按下一个按钮，在我的数据库中查询特定对象，在我的视图中执行一些操作，并返回我希望在弹出气泡中显示在同一页面上而不重新加载它的价格值，代替我有填充文本。我已经尝试通过创建一个带有id在值字段中包含对象的按钮的表单，并将该值发送到我的原始页面视图，然后我调用一个函数来处理我想用那个 id 做的事情。我请求对象id，将其传递给新的视图函数，然后查询我的数据库并尝试返回值。我做一个if request.POST在原始页面视图 t 中声明，并将呈现的变量更改为我想要显示的新值。当我按下按钮时，我在弹出气泡中得到相同的填充文本，在我的控制台中我得到以下错误：

ValueError: The view engine.views.search_list didn't return an HttpResponse object. It returned None instead.

因此，每当我调用视图函数时，我似乎都必须返回一个 HTTP 请求。我已经尝试在我的新视图函数中返回一个呈现的响应，并且在我检查if request.POST并将新值作为上下文传递之后：

return render(request, 'original_page.html', {'value':new_value})

我犯了同样的错误。如何在同一页面上返回我想要的值而不会出现此错误？我尝试使用HttpResponse空白值，redirect('some_place.html')但没有成功。我确实有一个 Iframe 可以阻止我的 html 页面重新加载。这是我正在使用的代码：

HTML

<iframe name="submit-frame" style="display: none"></iframe>
 <form action="{% url 'search_list' %}" method="post" target="submit-frame">{% csrf_token %}
     <button name="productId" value="{{product.id}}" data-toggle="popover" data-animation="true"  data-content="{{price}}"  type="" id='button'>Reveal Price</button>
 </form>

<script type="text/javascript">
 $('[data-toggle="popover"]').popover({
    container: 'body',
     delay: { "show": 100, "fade": 100 },
})

</script>

视图 - 获得新价值的功能

def get_price(request):
    product_id = request.POST.get('productId')
    item = get_object_or_404(Product, id=product_id)
    price = item.price
    return price

视图 - 原始渲染视图

def search_list(request):
results = Product.objects.all().order_by('name')
price = 'no_price'
if request.POST:
    print(request.POST.get('productId'))
    tcg_price = get_price(request)
    return render(request, 'search_result_list.html', {'tcg_price': tcg_price})
else: ...
return render(request, 'search_result_list.html', {'price': price, 'results':results})
4

1 回答 1

1

您尝试执行的操作通常应通过异步调用 (AJAX) 来处理。您当前设置的方式，表单被提交，页面将重新加载。这不是一种用户友好的体验，并且是“Web 1.0”的做事方式（还有，iframes......糟糕！）。以下是我将如何更改您的设置：

新视图

def ajax_get_price(request):
    response = {}
    product_id = request.POST.get('productId')

    try:
        item = Product.objects.get(id=product_id)
        response['price'] = item.price
        response['success'] = True
    except ObjectDoesNotExist:
        response['error'] = "Item not found!"
        response['success'] = False

    return JSONResponse(response)

新的前端处理程序

您可以通过 JavaScript 中的 AJAX 调用将数据发送到这个新的“视图”。我将在这里使用 jQuery 作为示例：

$("button[name='productId']").on("click", function() {
    var productID = $(this).val();
    $.ajax({
        'data': {
            'productId': productID
        },
        'type': "POST",
        'url': "{% url 'myproject:ajax_get_price' %}"
    })
    .done(function(json) {
        if(json.success == true) {
            var itemPrice = json.price;
            // TODO: Do something with the price here (show a popup, tooltip, whatever)
        } else {
            if(json.hasOwnProperty('error') {
                // TODO: Show the error
            })
        }
    })
    .fail(function(xhr, status, error) {
        // TODO: Handle this error case also
    });
});

除了这个存根之外，您还需要处理一些事情：

  • 您可能必须在 JavaScript 代码的beforeSend调用中处理 CSRF（跨站点请求伪造）令牌。$.ajax()
  • 您可能应该在视图中检查虚假查询（请求是 GET 调用吗？）和其他类似的边缘情况。
于 2018-07-23T19:49:13.013 回答