Question

我正在处理Django应用程序。在应用程序中，用户可以上载csv文件。然后使用pandas处理该csv文件，并使用pandas to_html函数生成html表。然后，该html表就会显示在网页上。

要提交表单，我使用Ajax来避免页面刷新。我面临的问题是使用ajax时显示表。

这是我的代码

views.py

def on_csv_upload(request):
    path = './csv/'
    if request.method == 'POST':
        if 'file' in request.FILES:
            handle_uploaded_file(request.FILES['file'], str(request.FILES['file']))
            df = pd.read_csv(os.path.join(path, str(request.FILES['file'])))
            table_heading = list(df.columns.values)
            table_content = df.to_html(classes='table table-bordered table-hover thead-dark', index=False)

            context = {'table_heading': table_heading, 'table_content': table_content}

            return render(request, 'index.html', context)

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>

<div class="scroll_it">
    {{ table_content|safe }}
</div>

index.js

$(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]);
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: form_data,
        dataType: 'html',
        processData: false,
        contentType: false,
        success: function (data) {
            displayTable(data);
        },
        error: function (xhr, status, err) {
            console.log("Something went wrong: " + err);
        }
    });
}

function displayTable(data) {
    $('.scroll_it').html(data);
}

我面临的问题是当我尝试在网页中显示表格时。该表的代码位于data: form_data内部。但是data还包含其他我不想显示的html代码。

这是data

中的内容

<!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'>Title</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='6ft25AdsMCwH1t4NubFsf8pHQchean05J3QM3HcV99C7wBZQ4XRbqEZXKit93H3x' />
                    <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">
  <thead>
    <tr style="text-align: right;">
      <th>Name</th>
      <th>RollNumber</th>
      <th>Present/Absent</th>
      <th>Date</th>
      <th>Day</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Present</td>
      <td>1/30/2018</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Present</td>
      <td>1/30/2018</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Present</td>
      <td>1/30/2018</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Present</td>
      <td>1/30/2018</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Absent</td>
      <td>1/31/2018</td>
      <td>Thursday</td>
      <td>23:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Present</td>
      <td>1/31/2018</td>
      <td>Thursday</td>
      <td>23:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Present</td>
      <td>1/31/2018</td>
      <td>Thursday</td>
      <td>23:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Present</td>
      <td>1/31/2018</td>
      <td>Thursday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Present</td>
      <td>2/1/2019</td>
      <td>Friday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Absent</td>
      <td>2/1/2019</td>
      <td>Friday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Absent</td>
      <td>2/1/2019</td>
      <td>Friday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Present</td>
      <td>2/1/2019</td>
      <td>Friday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Absent</td>
      <td>2/2/2019</td>
      <td>Saturday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Absent</td>
      <td>2/2/2019</td>
      <td>Saturday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Absent</td>
      <td>2/2/2019</td>
      <td>Saturday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Absent</td>
      <td>2/2/2019</td>
      <td>Saturday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Present</td>
      <td>2/4/2019</td>
      <td>Monday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Present</td>
      <td>2/4/2019</td>
      <td>Monday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Present</td>
      <td>2/4/2019</td>
      <td>Monday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Absent</td>
      <td>2/4/2019</td>
      <td>Monday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Present</td>
      <td>2/5/2019</td>
      <td>Tuesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Present</td>
      <td>2/5/2019</td>
      <td>Tuesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Absent</td>
      <td>2/5/2019</td>
      <td>Tuesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Absent</td>
      <td>2/5/2019</td>
      <td>Tuesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student1</td>
      <td>1</td>
      <td>Present</td>
      <td>2/6/2019</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student2</td>
      <td>2</td>
      <td>Present</td>
      <td>2/6/2019</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student4</td>
      <td>4</td>
      <td>Present</td>
      <td>2/6/2019</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
    <tr>
      <td>student3</td>
      <td>3</td>
      <td>Present</td>
      <td>2/6/2019</td>
      <td>Wednesday</td>
      <td>12:34:05</td>
    </tr>
  </tbody>
</table>
    </div>
</div>


        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
</html>

我的问题是我如何仅将代码$('.scroll_it').html(data);这一行中的表作为目标

Answer 1

返回render(request, 'index.html', context)是导致此问题的原因。您应该只返回所需的HTML。

但是现在您将面临一个问题，那就是您将必须编写2个视图函数，一个使用render，另一个使用HttpResponse。在这种情况下，我将严格限制render视图，使其仅返回页面总体布局，并将所有HTML Table呈现和更新委托给ajax，以便将其统一并首先在{ {1}}并根据要求进行更新。

document ready

然后通常将响应加载到页面的所需部分。

如何从ajax数据中选择表标签

1 个答案: