获得所选导航丸的价值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获得所选导航丸的价值相关的知识，希望对你有一定的参考价值。
我正在尝试制作一对导航丸，在一组数据的图形和表格输出之间进行选择，我似乎无法弄清楚如何获取导航丸的价值。我将导航丸定义如下：
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li {% if type_display == 'charts' %}class="active"{% endif %}><a href="charts" class="text-primary"><i class="fa fa-fw fa-bolt"></i> Charts</a></li>
<li {% if type_display == 'tables' %}class="active"{% endif %}><a href="tables" class="text-primary"><i class="fa fa-fw fa-calendar"></i> Tables</a></li>
</ul>
他们像这样渲染：
如何将选定的导航丸传回django？我试过了：
display_type = request.GET.getlist('charts')
我几乎没有html经验，所以任何信息都会很棒。谢谢！
我看到我之前的答案（下面）可能有点复杂，以实现你想要的。由于您似乎在页面中使用了链接，我建议如下：
使用正确的urlpattern将参数传递给您的视图并链接您的视图，如下所示：
模板/ HTML：
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li {% if type_display == 'charts' %} class="active"{% endif %}><a href="{% url 'yourview' charts %}" class="text-primary"><i class="fa fa-fw fa-bolt"></i> Charts</a></li>
<li {% if type_display == 'tables' %} class="active"{% endif %}><a href="{% url 'yourview' tables %}" class="text-primary"><i class="fa fa-fw fa-calendar"></i> Tables</a></li>
</ul>
url.pat中的urlpattern
urlpatterns = [
path('yoururl/<str:choice>/', views.yourview, name='yourview'), # Django 2
url(r'^yoururl/(?P<choice>w+)/$',views.yourview, name='check yourview'), # Django 1.11 and previous
]
views.朋友
def yourview(request, choice):
# In your view you can now access the choice. Like so:
print(choice)
但这都是非常基本的Django东西，我想你已经知道了。这将使Django重新加载整个页面，虽然这也可以与Ajax结合使用，如下所述。以下方法可以防止必须加载整个新页面。上面使用的链接样式也可以在下面的代码中使用，而不是使用表单。
请让我知道，如果你有任何问题。
以下是一种更复杂的方式，但它允许用户留在页面中
我做的方式如下，虽然可能有更好的方法，因为我现在只编程了几个月。
您可以使用单选按钮输入类型的形式。我假设您对形式有所了解，因为您使用Django。
在这里，您可以找到有关使用表格（无线电输入类型）https://www.w3schools.com/html/html_forms.asp的更多信息
但你不想看到单选按钮，我相信你可以隐藏它们。这个网站可能会帮助你（我不确定这是页面有答案，但我相信有一个非常简单的方法来隐藏单选按钮）：
https://www.jotform.com/answers/22605-How-to-make-radio-buttons-invisible
我对“导航丸”没有经验，但我很确定你可以将导航丸显示为单选按钮选项的内容：
<input type="radio" name="gender" value="male" checked> <nav-pill-goes-here><br>
希望这能为您提供另一种视角。
编辑：
缺点是您通常需要一个提交按钮来将您的信息发送到视图（使用表单时），但您可能不希望页面中有额外的按钮。你可以通过使用Ajax（使用javascript / jQuery）解决这个问题，但是如果你不知道它是如何工作的，你可能需要学习一些，这可能不是你想要的。如果您这样做，我建议您查看本教程：
使用ajax，您可以点击其中一个选项，将发布请求发送到视图而不离开页面，但仍然可以根据需要处理输入视图。
例
我在这里做了一个例子。我也尝试隐藏单选按钮，但我需要做更多的研究，如何做到这一点，仍然能够选择选项。但这指向一种可能的解决方案。你只需要添加导航丸，隐藏单选按钮，并有适当的视图来处理逻辑。
请注意，您需要使用jQuery才能工作，我在</body>标记结束之前加载了jQuery。 Bootstrap 4也使用jQuery，但它使用的是slim版本。你可以用这个版本替换slim版本，虽然这个版本是3.3.1，而bootstrap现在加载3.2.1，但我认为这是一个很小的问题。
示例html / template
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="{% url 'offer:radio_test' %}" id="chart-table-form">
{% csrf_token %}
<input type="radio" name="radio-option" value="chart"> Chart<br>
<input type="radio" name="radio-option" value="table"> Table<br>
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function() {
var form = $("#chart-table-form");
document.getElementById("chart-table-form").addEventListener("click", function() {
$.ajax({
url: form.attr("action"),
type: "post",
data: form.serialize(),
dataType: "json"
});
return false;
});
});
</script>
</body>
</html>
views.朋友
def radio_test(request):
if request.method == 'POST':
print(request.POST.get("radio-option")) # This will return the value 'chart' or 'table' / have you access the radio button value
return render(request, 'offer/radio_test.html')
以上是关于获得所选导航丸的价值的主要内容，如果未能解决你的问题，请参考以下文章
导航抽屉backstack，如何让actionbar标题在点击后随片段改变