Как предотвратить перезагрузку шаблона с помощью Ajax?
У меня есть две формы, две кнопки отправки и две текстовые области. Ситуация такова, что если я загружу содержимое в одну текстовую область, то содержимое другой текстовой области будет потеряно из-за перезагрузки. Поэтому я пытаюсь реализовать Ajax.
Так что у меня это выглядит следующим образом:
<body>
<div class="container center">
<span class="form-inline" role="form">
<div class="inline-div">
<form
class="form-inline"
role="form"
action="/controlepunt140"
method="POST"
enctype="multipart/form-data"
id="form_pdf"
>
<div class="form-group">
{% csrf_token %} {{ form }}
<button type="submit" name="form_pdf" class="btn btn-warning">
Upload!
</button>
</div>
</form>
<div class="form-outline">
<div class="form-group">
<textarea class="inline-txtarea form-control" cols="70" rows="25">
{{content}}</textarea
>
</div>
</div>
</div>
</span>
<span class="form-inline" role="form">
<div class="inline-div">
<form
class="form-inline"
role="form"
action="/controlepunt140"
method="POST"
enctype="multipart/form-data"
id="form_excel"
>
<div class="form-group">
{% csrf_token %} {{ form }}
<button type="submit" name="form_excel" class="btn btn-warning">
Upload!
</button>
</div>
</form>
<div class="form-outline">
<div class="form-group">
<textarea class="inline-txtarea form-control" cols="65" rows="25">
{{content_excel}}</textarea
>
</div>
</div>
</div>
</span>
</div>
<script type="text/javascript">
$("#form_pdf").submit(function (e) {
$.ajax({
url: "/controlepunt140",
type: "POST",
data: new FormData(this),
processData: false,
contentType: false,
success: function (result) {
console.log(result);
},
});
e.preventDefault();
});
$("#form_excel").submit(function (e) {
$.ajax({
url: "/controlepunt140",
type: "POST",
data: new FormData(this),
processData: false,
contentType: false,
success: function (result) {
console.log(result);
},
});
e.preventDefault();
});
</script>
</body>
Но затем я получаю эту ошибку:
Status
500
Internal Server Error
Вопрос: как с этим справиться?
Итак, если я попробую это сделать сейчас:
<script type="text/javascript">
$("#form_pdf").submit(function (e) {
e.preventDefault();
});
$("#form_excel").submit(function (e) {
e.preventDefault();
});
</script>
Но ничего не происходит. Я даже не могу загрузить файл. Но я вижу это сообщение:
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://b763c03f-2bac-417c-931f-361473344789/content-scripts/identity-protection/main.js
Source Map URL: compat.module.js.map