Question

我正在使用Django应用程序，该文件在文件上传时将csv文件显示为Web应用程序中的表格。这可以正常工作，但问题是提交表单时页面会重新加载。为此，我尝试使用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的新手，并不完全了解代码。

请帮助我

谢谢

[编辑1] 我在代码的错误部分中错误地注释了console.log。我删除了评论。而且我还添加了错误消息。它显示“出了点问题”和html。我没有添加整个html，因为它很大。

显示表格而不刷新表单提交页面

html

javascript

错误

0 个答案: