Как выбрать табличный тег из данных AJAX - PullRequest
Новая
       2

Как выбрать табличный тег из данных AJAX

0 голосов
/ 06 марта 2019

Я работаю над приложением django.В приложении пользователь может загрузить CSV-файл.Затем этот csv-файл обрабатывается пандами, а таблица html генерируется с помощью функции to_html pandas.Эта 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 template 

<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);

1 Ответ

1 голос
/ 06 марта 2019

Возвращение render(request, 'index.html', context) является причиной этой проблемы. Вы должны вернуть только тот HTML, который вам нужен.

Но теперь вы столкнетесь с проблемой, заключающейся в том, что вам придется написать 2 функции просмотра, одна из которых использует render, а другая - HttpResponse. В этом случае я бы строго придерживался представления render, чтобы он возвращал только общий макет страницы и делегировал бы весь HTML Table рендеринг и обновление для ajax, чтобы он был унифицирован и первоначально загружал таблицу на document ready и обновлял ее как просьба. 

def csv_upload_page(request):
    context = {}
    return render(request, 'index.html', context)


def on_csv_upload_ajax(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 HttpResponse(context)

Затем обычно загружайте ответ в нужный раздел страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...