我在以模式呈现 Django 表单时遇到了一些问题。我怀疑这是因为我需要一些 Ajax 来获取浏览器中的 url,但我不知道如何。
表格:
class TrackedWebsitesForm(forms.ModelForm):
class Meta:
model = TrackedWebsites
fields = "__all__"
查看:
def web(request):
if request.method == 'POST':
form = TrackedWebsitesForm(request.POST)
if form.is_valid():
try:
form.save()
return redirect('/websites')
except:
pass
else:
form = TrackedWebsitesForm()
return render(request,'dashboard/create_website.html',{'form':form})
网址:
urlpatterns = [
path('web', views.web),
创建网站.html:
<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" class="post-form" action="/web">
{% csrf_token %}
<div class="modal-header">
<h4 class="modal-title">Add website</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
{{ form.as_p }}
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-success" value="Add">
</div>
</form>
</div>
</div>
</div>
部分图片
非工作模态形式:
当通过链接直接访问时,表单有效:
有人能帮帮我吗?我手动呈现表单字段,但我只是用 form.as_p
剪切它,否则问题将无法验证,因为代码太多。
最佳答案
我认为,如果您可以打开模式但没有看到处方集,那是因为您没有加载它,请尝试这样做:
在你的 views.py 中添加这个
def add_employee(request):
form = TrackedWebsitesForm()
return render(request, 'your_template', {'form':form})
在你的 urls.py 中添加这个
path('employee/add', views.add_employee, name='add_employee'),
在你的 html 中
将其放在您计划打开模式的页面上并将按钮包裹在 div 中
<div id="addEmployee">
<a style="float:right" class="btn btn-success" >
<i class="fas fa-fw fa-plus"></i>
<span>Add New Employee</span>
</a>
</div>
<div id="addEmployeeModal" class="modal fade" role="dialog">
</div>
为模式创建一个不同的 html 并向您的表单添加一个 id
<div class="modal-dialog">
<div class="modal-content">
<form id="addEmployeeForm" method="POST" class="post-form" action="/web">
{% csrf_token %}
<div class="modal-header">
<h4 class="modal-title">Add website</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
{{ form.as_p }}
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-success" value="Add">
</div>
</form>
</div>
</div>
在你的代码中
$(document).ready(function () {
let my_modal = $("#addEmployeeModal");
const url_form = "/employee/add";
$("#addEmployee a").click(function () {
my_modal.load(url_form, function () {
my_modal.modal("show"); // Open Modal
$("#addEmployeeForm").submit(function (e) {
e.preventDefault(); // Cancel the default action
$.ajax({
method: "POST",
data: $(this).serialize(),
dataType: "json",
url: "/url that handles the request/",
success: function (response) {
my_modal.modal('hide');
},
error: function (response) {
},});
});
});
});
});
此答案将带您进入下一个问题:从模态发送数据后如何响应。因此,您必须在处理请求的 View 中执行以下操作。
首先在views.py中导入以下内容
from django.http import JsonResponse
然后在处理请求的 View 中复制这个
if form.is_valid ():
...
response = JsonResponse ({"message": 'success'})
response.status_code = 201 // indicates that the request has been processed correctly
return response
else:
...
response = JsonResponse ({"errors": form.errors.as_json ()})
response.status_code = 403 // indicates that there was an error processing the request
return response
关于python - 当我使用 Bootstrap 的模式时,我的 Django 表单没有呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55337793/