Я работаю над приложением django, которое отображает CSV-файл в виде таблицы в веб-приложении при загрузке файла.Это работает правильно, но проблема в том, что страница перезагружается при отправке формы.Для этого я попытался использовать ajax для загрузки данных без обновления страницы.Но, похоже, код не работает.
Это мой код до сих пор
html
<form action="{% url 'csv_upload' %}" method="POST" enctype="multipart/form-data" class="mt-2 mb-2 csv_upload_form">
{% csrf_token %}
<input type="file" name="file" id="file" class="inputfile"/>
<label for="file" class="btn btn-outline-dark btn-lg btn-block select">Choose .csv file</label>
<input class='btn btn-warning btn-lg btn-block upload_csv_button' type="submit" value="Upload file" disabled/>
</form>
javascript
$(document).on('submit', '.csv_upload_form', function(event) {
event.preventDefault();
csvUploadAjax();
});
function csvUploadAjax() {
let $form = $(".csv_upload_form");
let form_data = new FormData($form[0]);
console.log(form_data)
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: form_data,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
displayTable(data);
},
error: function (xhr) {
console.log("Something went wrong: " + xhr.responseText);
}
});
}
function displayTable(data) {
console.log(data)
$(".scroll_it").val(data);
}
Ошибка
Something went wrong:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display|Source+Sans+Pro" rel="stylesheet">
<!-- base.css -->
<link rel="stylesheet" href="/static/css/base.css">
<title>Home</title>
<link rel="stylesheet" href="/static/css/index.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/static/js/index.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 class='mt-5 title'>Dashboard</h1>
<!-- <button class='btn btn-warning btn-lg start'>Start</button> -->
<div class="row justify-content-center">
<div class="col-5">
<div class="card-body upload_form">
<form action="/csv_upload" method="POST" enctype="multipart/form-data" class="mt-2 mb-2 csv_upload_form">
<input type='hidden' name='csrfmiddlewaretoken' value='3J59IqYwIAdIRUf0V9gceqZ7ZoUomkLAGxsTGxXZ57j8m2a3vVsVpWznTu6jfEO2' />
<input type="file" name="file" id="file" class="inputfile"/>
<label for="file" class="btn btn-outline-dark btn-lg btn-block select">Choose .csv file</label>
<input class='btn btn-warning btn-lg btn-block upload_csv_button' type="submit" value="Upload file" disabled/>
</form>
</div>
</div>
</div>
<div class="scroll_it">
<table border="1" class="dataframe table table-bordered table-hover thead-dark">
В приведенном выше коде код ошибки выполняется каждый раз.Я не уверен, что я делаю неправильно.Я новичок в AJAX и не полностью понимаю код.
Пожалуйста, помогите мне
Спасибо
[EDIT 1] Я по ошибке закомментировал console.log в части кода ошибки.Я удалил комментарий.И я также добавил сообщение об ошибке.Он печатает «что-то не так» и HTML.Я не добавил весь HTML, так как он очень большой.