我有一个模态表单，当用户需要在不离开页面的情况下创建内容时，我会使用它。为了避免在模态表单提交后刷新页面，我使用ajax提交表单。
由于一系列原因，我无法逐个字段解析表单，所以我试图找到一种方法来获取所有表单数据，并用"；一般的"；方法，然后在我的视图中处理post请求(用post填充表单(。
然而，我使用的方法不起作用，我希望有人有另一个想法。
<body>
<!--Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Popup -->
<div class="pop-up-form">
<div class="pop-up-form__wrp">
<!-- Title -->
<div class="pop-up-form__title-wrp">
<h2 class="pop-up-form__title">Create New</h2>
</div>
<!-- END Title -->
<!-- Form -->
<form class="pop-up-form__form" id="form">
{% csrf_token %}
{% for field in form %}
<div class="pop-up-form__input-wrp">
<label class="pop-up-form__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field|add_class:"pop-up-form__input" }}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
<!--
<div class="form-group{#% if field.errors %#}invalid{#% endif %#}"></div>
-->
<!-- BTNs -->
<div class="pop-up-form__btn-wrp">
<button data-dismiss="modal" class="btn-transparent">Close</button>
<button type="submit" form='form' class="btn-black">Save</button>
</div>
<!-- END BTNs -->
</form>
<!-- END Form -->
</div>
</div>
<!-- END Popup -->
</div>
</div>
</div>
<!--Modal -->
</body>
<script>
$('#form').on('submit', function(e){
e.preventDefault();
console.log('I am getting called')
$.ajax({
type: "POST",
url: "{{ post }}",
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
'data': $('form').serialize(),
},
success: function(response) {
console.log('success updated')
console.log(response)
}
});
})
</script>
我解决了这个不断变化的方法。这是我正在使用的最后一个html和js，以及视图上用于取消实现序列化数据的代码。
<body>
<!--Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="{{ modal_id }}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Popup -->
<div class="pop-up-form">
<div class="pop-up-form__wrp">
<!-- Title -->
<div class="pop-up-form__title-wrp">
<h2 class="pop-up-form__title">Create New</h2>
</div>
<!-- END Title -->
<!-- Form -->
<form class="pop-up-form__form" id="modalform">
{% csrf_token %}
{% for field in form %}
<div class="pop-up-form__input-wrp">
<label class="pop-up-form__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field|add_class:"pop-up-form__input" }}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
<!--
<div class="form-group{#% if field.errors %#}invalid{#% endif %#}"></div>
-->
<!-- BTNs -->
<div class="pop-up-form__btn-wrp">
<button data-bs-dismiss="{{ modal_id }}" class="btn-transparent">Close</button>
<button type="submit" form='modalform' class="btn-black">Save</button>
</div>
<!-- END BTNs -->
</form>
<!-- END Form -->
</div>
</div>
<!-- END Popup -->
</div>
</div>
</div>
<!--Modal -->
</body>
<script>
$('#modalform').on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "{{ post }}",
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
'data': $('#modalform').serialize(),
},
success: function(response) {
console.log('success updated')
console.log(response)
$('{{update_id}}').selectize()[0].selectize.addOption(
[{'id': response['id'], 'title_name': response['title_name']}]
)
$('{{ update_id }}')[0].selectize.addItem(response['id']);
$("#{{ modal_id }}").modal('toggle');
}
});
})
</script>
form_data = QueryDict(request.POST['data'].encode('ASCII')) # Query strings use only ASCII code points so it is safe.
title_form = TitleModalForm(form_data)