使用多个键值制作 django html 模板请求
Making a django html template request with multiple key values
我刚开始使用 Django 甚至是创建网站，所以如果我也提供了 little/much 有关我所面临问题的详细信息，请多多包涵。此外，上周我花了大部分时间浏览 SO 页面、博客、Django 教程、Django 文档等，试图自己解决问题。也许我忽略了某些事情或者我只是不走运，但我发现没有任何东西能完全解决我的特殊情况。大多数示例似乎侧重于处理 views.py 中的请求，而不是侧重于如何在 Django 模板中发出原始请求。
我有一个 Django 模板 view_table.html，它向用户显示 Bootstrap DataTable table 对象。 table 的第二列是一个名为 MyRow_ID 的 BigIntegerField。我目前在 MyCode.js 中有代码允许用户突出显示多行，当单击按钮 modify_button 时，所选行的 MyRow_ID 值（例如 [2, 13, 14]）被捕获到名为 sent_data[= 的 JS 字典中78=]。捕获这些值后，我希望 modify_button 创建一个发送 sent_data 的 GET 请求用它。在urls.py中匹配后在views.py[=中调用modify_data函数78=], modify_data 应该呈现一个新页面 modify_table.html 同时传回匹配 [=34= 的模型实例]MyRow_ID 以便仅显示选定行的数据。我想我真的很接近，也许我只需要对正则表达式进行调整，但这是我的问题：
- 如何在 Django 模板 view_table.html 中创建 GET 请求，将 sent_data 传递给姜戈？目前我正在使用 method 和 action 属性设置为 "GET" 的表单和 "{% url 'modify_data' sent_data=sent_data %}"。我假设应该使用 GET 而不是 POST，因为请求没有修改后端，它更像是一种 "filter the view" 类型的请求。这是一个正确的假设吗？请求的 url 会是什么样子？假设 MyRow_ID 值为 [2,13,14]。获取请求看起来像 /modify_data/matched_row_1=2&matched_row_2=13&matched_row_3=14 吗？我是否必须通过遍历 sent_data 并附加 "matched_row_n=" 字符串在模板中自己创建此 url 字符串，还是有更简单的方法让模板在请求中自动创建这个？
- 在 myapp/urls.py 中应该使用什么正确的正则表达式模式，给定 sent_data 可以有 1 到 n 个唯一的 MyRow_ID 值，假设分别选择了 1 到 n 行？ （显然，健壮的代码将包括处理选择 0 行和单击 modify_button 的情况，但让我们暂时搁置它。）目前我在 /myapp/view_data/: 使用参数“()”和关键字参数“{u”sent_data”反转 'modify_data'：未找到“}”。我刚开始使用正则表达式，我知道 myapp/urls.py 中的内容是错误的。
- myapp/views.py中的代码是否正确过滤匹配的模型实例并渲染modify_table.html使用选定的行？
view_table.html:
<!DOCTYPE html>
<html>
<head>
## Bunch of code… ##
</head>
<body>
<div class="col col-xs-12 text-right">
<form style="display" method="get" action="{% url 'modify_data' sent_data=sent_data %}">
<button id="modify_button" type="button" class="btn btn-primary btn-create">Modify Data</button>
</form>
</div>
<br><br><br>
<table id="my_table">
## Code that displays my_table ##
</table>
<!-- Execute JS scripts -->
<script type="text/javascript" src="{% static "myapp/js/jquery-1.12.0.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/jquery.dataTables.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/bootstrap.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/dataTables.bootstrap.min.js" %}"></script>
<script type="text/javascript">
var sent_data = [];
</script>
<script type="text/javascript" src="{% static "myapp/js/MyCode.js" %}"></script>
</body>
</html>
MyCode.js:
$(document).ready(function(){
var oTable = $('#my_table').DataTable();
var selected_data = [];
$('#my_table tbody').on('click','tr',function(){
$(this).toggleClass('active');
});
$('#modify_button').click(function(event){
selected_data = $.map(oTable.rows('.active').data(), function (item) {
return item[1]
});
sent_data = { 'modify_rows': selected_data };
});
});
我应该注意我使用的是 MyRow_ID 而不是本机 DataTable 属性 rowID 因为我假设DataTable 自动创建的 rowID 与 Django 使用的自动创建的主键 (pk) 不匹配。这是一个正确的假设吗？
myapp/urls.py:
from django.conf.urls import url
from . import views
from .models import MyDataModel
urlpatterns = [
url(r'^view_data/$', views.view_data, name='view_data'),
url(r'^modify_data/(?P<sent_data>\d+)/$', views.modify_data, name='modify_data'),
]
myapp/views.py:
from django.forms import modelformset_factory
from django.shortcuts import render
from django.http import HttpResponse
from .models import MyDataModel
def view_data(request):
myData = MyDataModel.objects.all()
return render(request, 'myapp/view_table.html', {'myData': myData})
def modify_data(request, sent_data):
MyDataFormSet = modelformset_factory(MyDataModel, fields=('MyRow_ID','MyRow_Text'))
if request.method == 'GET':
selected_rows = sent_data['modify_rows']
## selected_rows = request.GET['modify_rows']
formset = MyDataFormSet(queryset=MyDataModel.objects.filter(MyRow_ID__in=selected_rows))
selected_data = MyDataModel.objects.filter(MyRow_ID__in=selected_rows)
return render(request, 'myapp/modify_data.html', {'formset': formset, 'selected_data': selected_data})
else:
return HttpResponse('A GET request was not received.')
最后，modify_data.html:
<!DOCTYPE html>
<html>
<head>
## Bunch of code… ##
</head>
<body>
<div class="col col-xs-12 text-right">
<form method="post" action="">
{% csrf_token %}
{{ formset }}
<button id="submit_changes" type="button" class="btn btn-primary btn-create">Submit Changes</button>
</form>
</div>
<br><br><br>
<table id="selected_rows_table">
## Code that displays selected rows passed as selected_data ##
</table>
</body>
</html>
非常感谢任何帮助，提前致谢！
通过多次试验和错误以及老式的谷歌搜索，我能够解决上述问题并更好地理解查询字符串、正则表达式模式甚至如何使用 AJAX 请求来完成我最初的目标。
我最初的目标是允许用户 select 多行数据，单击一个按钮，然后在一个表单中同时编辑它们，所述表单要么呈现在新页面上，要么呈现在模态。以下 posts/blogs 对每一块拼图都非常有帮助：
关于 urls、request/responses 和模型表单集的 Django 文档：
https://docs.djangoproject.com/en/1.10/topics/http/urls/
https://docs.djangoproject.com/en/1.10/ref/request-response/
https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/#model-formsets
创建 Bootstrap 模态框的指南：
https://coolestguidesontheplanet.com/bootstrap/modal.php
了解 url 和查询字符串如何处理单个键的多个值：
http://meyerweb.com/eric/tools/dencoder/（用于测试）
How to pass multiple values for a single URL parameter?
Capturing url parameters in request.GET
使用Django的例子AJAX形式：
http://schinckel.net/2013/06/13/django-ajax-forms/
用于处理服务器对 AJAX 请求的响应并刷新页面的代码：
Update div with jQuery ajax response html
关于为单个键使用具有多个值的查询字符串需要注意的一件重要事情，例如假设我的 GET 请求的 url 类似于 www.myurl.com/?page=1&page=2&page=3;当使用 AJAX GET 请求时，它将为此 url 创建一个带有 www.myurl.com/?page[]=1&page[]=2&page[]=3 的查询字符串，即它为具有多个值的任何键添加“[]”括号。在处理请求时检索 views.py 中 "page" 键的所有值的通常答案（由 Django 和其他人记录）是使用 request.GET.getlist('page')。这行不通。您需要使用 request.GET.getlist('page[]')。在 request.method.getlist() 中添加括号或从 url 请求的原始查询字符串中删除它们。
最后，这里有一些修改后的代码片段可以解决我原来的问题：
在 view_data.html 中，更新后的形式：
<form id="modify_form" method="post" action="{% url 'modify_data' %}">
{% csrf_token %}
{{ formset }}
</form>
在 myapp/urls.py 中，修复了 url 查找器以处理传递的任何查询字符串：
url(r'^modify_data/$', views.modify_data, name='modify_data'),
在myapp/views.py中，更改modify_data代码：
def modify_data(request):
MyDataFormSet = modelformset_factory(MyDataModel, fields=('MyRow_ID','MyRow_Text'))
if request.is_ajax():
template = 'myapp/view_data.html'
else:
template = 'myapp/modify_data.html'
if request.method == 'GET':
selected_rows = request.GET.getlist['modify_rows[]']
formset = MyDataFormSet(queryset=MyDataModel.objects.filter(MyRow_ID__in=selected_rows))
selected_data = MyDataModel.objects.filter(MyRow_ID__in=selected_rows)
return render(request, template, {'formset': formset, 'selected_data': selected_data})
else:
return HttpResponse('A GET request was not received.')
在 MyCode.js 中，代码已更新以反映使用模态形式，AJAX GET 请求并使用 Django [刷新 DOM view.py的回复：
$("#modify_button").click(function(){
selected_data = $.map(oTable.rows('.active').data(), function (item) {
return item[1]
});
$.ajax({
// The URL for the request
url: URL,
// The data to send (will be converted to a query string)
data: {
modify_rows: selected_data,
},
// Whether this is a POST or GET request
type: "GET",
})
// Code to run if the request succeeds (is done);
// The response is passed to the function
.done(function( json ) {
var forms_result = $('<div />').append(json).find('#modify_form').html();
$('#modify_form').html(forms_result);
var table_result = $('<div />').append(json).find('#my_table').html();
$('#my_table').html(table_result);
})
// Code to run if the request fails; the raw request
// and status codes are passed to the function
.fail(function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
})
});
希望所有这些对其他人有所帮助，如果没有，整个过程对我来说都是一次很好的学习经历！
我刚开始使用 Django 甚至是创建网站，所以如果我也提供了 little/much 有关我所面临问题的详细信息，请多多包涵。此外，上周我花了大部分时间浏览 SO 页面、博客、Django 教程、Django 文档等，试图自己解决问题。也许我忽略了某些事情或者我只是不走运，但我发现没有任何东西能完全解决我的特殊情况。大多数示例似乎侧重于处理 views.py 中的请求，而不是侧重于如何在 Django 模板中发出原始请求。
我有一个 Django 模板 view_table.html，它向用户显示 Bootstrap DataTable table 对象。 table 的第二列是一个名为 MyRow_ID 的 BigIntegerField。我目前在 MyCode.js 中有代码允许用户突出显示多行，当单击按钮 modify_button 时，所选行的 MyRow_ID 值（例如 [2, 13, 14]）被捕获到名为 sent_data[= 的 JS 字典中78=]。捕获这些值后，我希望 modify_button 创建一个发送 sent_data 的 GET 请求用它。在urls.py中匹配后在views.py[=中调用modify_data函数78=], modify_data 应该呈现一个新页面 modify_table.html 同时传回匹配 [=34= 的模型实例]MyRow_ID 以便仅显示选定行的数据。我想我真的很接近，也许我只需要对正则表达式进行调整，但这是我的问题：
- 如何在 Django 模板 view_table.html 中创建 GET 请求，将 sent_data 传递给姜戈？目前我正在使用 method 和 action 属性设置为 "GET" 的表单和 "{% url 'modify_data' sent_data=sent_data %}"。我假设应该使用 GET 而不是 POST，因为请求没有修改后端，它更像是一种 "filter the view" 类型的请求。这是一个正确的假设吗？请求的 url 会是什么样子？假设 MyRow_ID 值为 [2,13,14]。获取请求看起来像 /modify_data/matched_row_1=2&matched_row_2=13&matched_row_3=14 吗？我是否必须通过遍历 sent_data 并附加 "matched_row_n=" 字符串在模板中自己创建此 url 字符串，还是有更简单的方法让模板在请求中自动创建这个？
- 在 myapp/urls.py 中应该使用什么正确的正则表达式模式，给定 sent_data 可以有 1 到 n 个唯一的 MyRow_ID 值，假设分别选择了 1 到 n 行？ （显然，健壮的代码将包括处理选择 0 行和单击 modify_button 的情况，但让我们暂时搁置它。）目前我在 /myapp/view_data/: 使用参数“()”和关键字参数“{u”sent_data”反转 'modify_data'：未找到“}”。我刚开始使用正则表达式，我知道 myapp/urls.py 中的内容是错误的。
- myapp/views.py中的代码是否正确过滤匹配的模型实例并渲染modify_table.html使用选定的行？
view_table.html:
<!DOCTYPE html>
<html>
<head>
## Bunch of code… ##
</head>
<body>
<div class="col col-xs-12 text-right">
<form style="display" method="get" action="{% url 'modify_data' sent_data=sent_data %}">
<button id="modify_button" type="button" class="btn btn-primary btn-create">Modify Data</button>
</form>
</div>
<br><br><br>
<table id="my_table">
## Code that displays my_table ##
</table>
<!-- Execute JS scripts -->
<script type="text/javascript" src="{% static "myapp/js/jquery-1.12.0.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/jquery.dataTables.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/bootstrap.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/dataTables.bootstrap.min.js" %}"></script>
<script type="text/javascript">
var sent_data = [];
</script>
<script type="text/javascript" src="{% static "myapp/js/MyCode.js" %}"></script>
</body>
</html>
MyCode.js:
$(document).ready(function(){
var oTable = $('#my_table').DataTable();
var selected_data = [];
$('#my_table tbody').on('click','tr',function(){
$(this).toggleClass('active');
});
$('#modify_button').click(function(event){
selected_data = $.map(oTable.rows('.active').data(), function (item) {
return item[1]
});
sent_data = { 'modify_rows': selected_data };
});
});
我应该注意我使用的是 MyRow_ID 而不是本机 DataTable 属性 rowID 因为我假设DataTable 自动创建的 rowID 与 Django 使用的自动创建的主键 (pk) 不匹配。这是一个正确的假设吗？
myapp/urls.py:
from django.conf.urls import url
from . import views
from .models import MyDataModel
urlpatterns = [
url(r'^view_data/$', views.view_data, name='view_data'),
url(r'^modify_data/(?P<sent_data>\d+)/$', views.modify_data, name='modify_data'),
]
myapp/views.py:
from django.forms import modelformset_factory
from django.shortcuts import render
from django.http import HttpResponse
from .models import MyDataModel
def view_data(request):
myData = MyDataModel.objects.all()
return render(request, 'myapp/view_table.html', {'myData': myData})
def modify_data(request, sent_data):
MyDataFormSet = modelformset_factory(MyDataModel, fields=('MyRow_ID','MyRow_Text'))
if request.method == 'GET':
selected_rows = sent_data['modify_rows']
## selected_rows = request.GET['modify_rows']
formset = MyDataFormSet(queryset=MyDataModel.objects.filter(MyRow_ID__in=selected_rows))
selected_data = MyDataModel.objects.filter(MyRow_ID__in=selected_rows)
return render(request, 'myapp/modify_data.html', {'formset': formset, 'selected_data': selected_data})
else:
return HttpResponse('A GET request was not received.')
最后，modify_data.html:
<!DOCTYPE html>
<html>
<head>
## Bunch of code… ##
</head>
<body>
<div class="col col-xs-12 text-right">
<form method="post" action="">
{% csrf_token %}
{{ formset }}
<button id="submit_changes" type="button" class="btn btn-primary btn-create">Submit Changes</button>
</form>
</div>
<br><br><br>
<table id="selected_rows_table">
## Code that displays selected rows passed as selected_data ##
</table>
</body>
</html>
非常感谢任何帮助，提前致谢！
通过多次试验和错误以及老式的谷歌搜索，我能够解决上述问题并更好地理解查询字符串、正则表达式模式甚至如何使用 AJAX 请求来完成我最初的目标。
我最初的目标是允许用户 select 多行数据，单击一个按钮，然后在一个表单中同时编辑它们，所述表单要么呈现在新页面上，要么呈现在模态。以下 posts/blogs 对每一块拼图都非常有帮助：
关于 urls、request/responses 和模型表单集的 Django 文档：
https://docs.djangoproject.com/en/1.10/topics/http/urls/
https://docs.djangoproject.com/en/1.10/ref/request-response/
https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/#model-formsets
创建 Bootstrap 模态框的指南：
https://coolestguidesontheplanet.com/bootstrap/modal.php
了解 url 和查询字符串如何处理单个键的多个值：
http://meyerweb.com/eric/tools/dencoder/（用于测试）
How to pass multiple values for a single URL parameter?
Capturing url parameters in request.GET
使用Django的例子AJAX形式：
http://schinckel.net/2013/06/13/django-ajax-forms/
用于处理服务器对 AJAX 请求的响应并刷新页面的代码：
Update div with jQuery ajax response html
关于为单个键使用具有多个值的查询字符串需要注意的一件重要事情，例如假设我的 GET 请求的 url 类似于 www.myurl.com/?page=1&page=2&page=3;当使用 AJAX GET 请求时，它将为此 url 创建一个带有 www.myurl.com/?page[]=1&page[]=2&page[]=3 的查询字符串，即它为具有多个值的任何键添加“[]”括号。在处理请求时检索 views.py 中 "page" 键的所有值的通常答案（由 Django 和其他人记录）是使用 request.GET.getlist('page')。这行不通。您需要使用 request.GET.getlist('page[]')。在 request.method.getlist() 中添加括号或从 url 请求的原始查询字符串中删除它们。
最后，这里有一些修改后的代码片段可以解决我原来的问题：
在 view_data.html 中，更新后的形式：
<form id="modify_form" method="post" action="{% url 'modify_data' %}">
{% csrf_token %}
{{ formset }}
</form>
在 myapp/urls.py 中，修复了 url 查找器以处理传递的任何查询字符串：
url(r'^modify_data/$', views.modify_data, name='modify_data'),
在myapp/views.py中，更改modify_data代码：
def modify_data(request):
MyDataFormSet = modelformset_factory(MyDataModel, fields=('MyRow_ID','MyRow_Text'))
if request.is_ajax():
template = 'myapp/view_data.html'
else:
template = 'myapp/modify_data.html'
if request.method == 'GET':
selected_rows = request.GET.getlist['modify_rows[]']
formset = MyDataFormSet(queryset=MyDataModel.objects.filter(MyRow_ID__in=selected_rows))
selected_data = MyDataModel.objects.filter(MyRow_ID__in=selected_rows)
return render(request, template, {'formset': formset, 'selected_data': selected_data})
else:
return HttpResponse('A GET request was not received.')
在 MyCode.js 中，代码已更新以反映使用模态形式，AJAX GET 请求并使用 Django [刷新 DOM view.py的回复：
$("#modify_button").click(function(){
selected_data = $.map(oTable.rows('.active').data(), function (item) {
return item[1]
});
$.ajax({
// The URL for the request
url: URL,
// The data to send (will be converted to a query string)
data: {
modify_rows: selected_data,
},
// Whether this is a POST or GET request
type: "GET",
})
// Code to run if the request succeeds (is done);
// The response is passed to the function
.done(function( json ) {
var forms_result = $('<div />').append(json).find('#modify_form').html();
$('#modify_form').html(forms_result);
var table_result = $('<div />').append(json).find('#my_table').html();
$('#my_table').html(table_result);
})
// Code to run if the request fails; the raw request
// and status codes are passed to the function
.fail(function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
})
});
希望所有这些对其他人有所帮助，如果没有，整个过程对我来说都是一次很好的学习经历！