Отправка данных в другой шаблон/вид django после определенного процесса с помощью ajax
У меня есть страница, на которой я загружаю 2 файла. После нажатия на кнопку загрузки, эта страница перезагружается, чтобы отобразить большую часть данных, позволяя пользователю изменить их. После нажатия на кнопку lunch я хочу запустить процесс и отправить на другую страницу путь к файлам результатов, чтобы пользователь мог их загрузить.
Моя проблема заключается в том, что после нажатия на кнопку lunch данные отправляются на другую страницу. У меня есть 2 версии :
Первый, отправляет данные на страницу результата, но я не нахожу способа вернуть в представление данные, измененные пользователем, ajax кажется игнорируется из-за типа "summit" для кнопки запуска :
<body>
<section class="bg-light py-5 border-bottom">
<div class="container px-5 my-5 px-5">
<div>
<h1 class="display-5 fw-bolder mb-2"> Convert to Dose </h1>
<br>
</div>
<form id="formCTD" action="{% url 'json:convertToDose' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
##here some fields to modified one of them following
<div class="row gx-5 justify-content-center">
<div class="col-lg-4 col-xl-4">
{% if factors %}
<input name="img_path" readonly
class="form-control" {{ pathAnalyseForm.img_path }}>
{% else %}
<input id="btn-submit-form-jsonfile"
class="btn btn-lg" {{ formImgFile.imgFile }}>
{% endif %}
</div>
</div>
<div class="text-center">
<div class="d-grid">
{% if factors %}
<button class="btn btn-primary btn-lg" id="launchButton" type="submit">
Launch
</button>
{% else %}
<button class="btn btn-primary btn-lg" id="submitButton" type="submit">
Load
</button>
{% endif %}
/div>
</div>
</form>
</div>
</section>
</body>
И блок js :
<script type="text/javascript">
$(document).ready(function () {
$("#launchButton").on('submit', function(e) {
e.preventDefault();
var form = $("#formCTD").get(0) //recup en html
// Est-ce que le formulaire est valide ?
console.log("valid? ")
if (form.checkValidity()) {
console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ")
nam = $("input[name='img_path']").val()
json = $("input[name='json_path']").val()
console.log(nam)
data = {"img_path" : nam,
"json_path": json}
console.log("bef ajax")
$.ajax({
url: "/filmchromique/convertToDose/",
type: "POST",
data: data,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", $('input[name="csrfmiddlewaretoken"]').val());
},
success: function (response) {
console.log("ok")
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
})
console.log("after ajax")
}
});
});
</script>
И вид :
def launchCtd(request):
if request.method == 'POST':
#2 after click load
if bool(request.FILES.get('calibrationFile', False)) == True and bool(request.FILES.get('imgFile', False)) == True :
#do some test ok
context = {
'factors': True,
'factorsCalib': factorsCalib,
'formCtd': formCtd,
'formJsonFile': formJsonFile,
'formImgFile': formImgFile,
'pathAnalyseForm': pathAnalyseForm,
'doseRect': doseRect,
'ctrlRect': ctrlRect,
}
return render(request, 'convertToDose.html', context)
after click lunch
else:
if request.is_ajax:
print ("here")#check
img_path = request.POST.get("img_path")
doseRectStr = request.POST.getlist('form[]')
json_pactrlRectth = request.POST.get("json_path")
method = request.POST.get("analyse_type")
if method == 'rb':
#init var
if method == 'multi':
#init var
img_out_path, json_pactrlRectth = functionTOLaunch()
context = {
'filename': img_out_path,
'protocol_file': json_pactrlRectth,
}
return render(request, 'result.html', context)
#1 load init
else:
formCtd = CtdForm()
formJsonFile = JsonFileForm()
formImgFile = ImgFileForm()
context = {
'factors': False,
'formCtd': formCtd,
'formJsonFile': formJsonFile,
'formImgFile' : formImgFile,
}
return render(request, 'convertToDose.html', context)
и результирующей страницей является базовый TemplateView.
В первом случае console.log в ajax не выводится, я не понимаю почему и предположил, что функция не вызывается (и поэтому ajax часть)
Во второй версии представления идентичны, но я изменил это в html :
<button class="btn btn-primary btn-lg" id="launchButton" type="button">
Launch</button>
и это в части js :
$("#launchButton").on('click', function(e) {....}
Данные отправляются в представление, я могу их прочитать, но когда я делаю рендер, чтобы отобразить страницу результата без данных процесса, ничего не добавляется... Я предполагаю, что мне нужно реализовать что-то в части succes ajax, но я не понимаю, что я должен сделать. Я предполагаю, что мне нужно реализовать новый ajax запрос, чтобы отправить новый контекст на страницу результата, но как мне забрать контекст, отправленный рендером в success ajax... Я совсем новичок и потерялся в этой технологии
Спасибо, что прочитали :)