这里的问题是,在发布表单时,create_usecase
函数会运行,然后重定向到另一个URL。此URL在视图中运行quest
函数并执行函数中的每一行,但它不会在所有create-usecase
模板中保持原样返回。
所以模板是这样的:
<form>
<div class="row">
<div class="input-field col s6 offset-s3">
<div class="row">
<div class="col m2 s4">
<p>Case name</p>
</div>
<div class="col m10 s8">
<input id="usecase_name" type="text" name="usecase_name" placeholder="Case name">
</div>
</div>
</div>
<div class="input-field col s6 offset-s3">
<select id="category-list">
<option value="" disabled selected>Choose your Category</option>
<option value="1">University/College</option>
<option value="2">Hospital</option>
<option value="3">Business Organizations</option>
</select>
<label>Categories</label>
</div>
</div>
<div id="subcategory-list" class="row">
<div class="col s6 offset-s3">
{% if data %}
<h6>Sub Category</h6>
{% for item in data %}
<div class="form-check">
<input class="form-check-input" onchange="subCategoryValue('{{ item.username }}')" type="radio" name="sub-category" id="{{ item.username }}" value="{{ item.username }}">
<label class="form-check-label" for="{{ item.username }}">
{{ item.username }}
</label>
</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row center">
<button type="submit" id="nextBtn" class="btn waves-effect waves-light orange">Next</button>
</div>
</form>
<script type="text/javascript">
var flag = ''
function subCategoryValue(v) {
flag = v;
$('#nextBtn').show();
}
$(document).ready(function(){
$('#nextBtn').hide();
$('#category-list').change(function(e){
e.preventDefault();
if($('#usecase_name').val() !== '') {
$.ajax({
type: 'POST',
url: '/create-usecase/',
data: {
usecase_name: $('#usecase_name').val(),
category: $('#category-list').val(),
sub_category: '',
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function(response) {
$('#subcategory-list').replaceWith($("#subcategory-list",response));
}
});
} else {
alert('Please fill the usecase field.')
}
});
});
$('#nextBtn').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '/create-usecase/',
data: {
usecase_name: $('#usecase_name').val(),
category: $('#category-list').val(),
sub_category: flag,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function() {
}
})
});
</script>
观点:
def create_usecase(request):
if not request.user.is_authenticated:
return redirect('index')
else:
if request.method == 'POST':
if not request.POST['sub_category'] == '':
print(request.POST['sub_category'])
#create a use new use case or project in the database
request.session['usecase_name'] = request.POST['usecase_name']
request.session['category'] = request.POST['category']
request.session['sub_category'] = request.POST['sub_category']
return redirect('quest')
else:
users = User.objects.all()
return render(request, 'usecases/create-usecase.html', {'data': users})
else:
return render(request, 'usecases/create-usecase.html')
def quest(request):
print('questions!')
print('{} {} {} '.format(request.session['usecase_name'], request.session['category'], request.session['sub_category']))
return HttpResponse('test')
网址:
urlpatterns = [
path('create-usecase/quest/', views.quest, name='quest'),
path('create-usecase/', views.create_usecase, name='create_usecase'),
]
控制台:
[17/May/2018 13:57:14] "GET /create-usecase/ HTTP/1.1" 200 4376
[17/May/2018 13:57:19] "POST /create-usecase/ HTTP/1.1" 200 5514
test1
[17/May/2018 13:57:23] "POST /create-usecase/ HTTP/1.1" 302 0
questions!
test 1 test1
[17/May/2018 13:57:23] "GET /create-usecase/quest/ HTTP/1.1" 200 4