Python 如何从ajax数据中选择表标记_Python_Jquery_Ajax_Django

Python 如何从ajax数据中选择表标记

python jquery ajax django

Python 如何从ajax数据中选择表标记,python,jquery,ajax,django,Python,Jquery,Ajax,Django,我正在开发django应用程序。在应用程序中，用户可以上载csv文件。然后使用pandas处理csv文件，并使用pandas to_html函数生成html表。然后，此html表将显示在网页上为了提交表单，我使用ajax来避免页面刷新。我面临的问题是在使用ajax时显示表这是我的密码 views.py html模板我面临的问题是当我试图在网页中显示表格时。表的代码位于数据内部：form_data。但数据还包含我不想显示的其他html代码这是数据内部的内容我的问题是如何只针对这行代码$

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

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

这是我的密码

views.py

html模板

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

这是数据内部的内容

我的问题是如何只针对这行代码$'中的表

返回renderrequest，'index.html'，上下文是导致此问题的原因。您应该只返回所需的HTML

但现在您将面临一个问题，即必须编写两个视图函数，一个使用render，另一个使用HttpResponse。在本例中，我将严格要求render视图只返回页面总体布局，并将所有HTML表的呈现和更新委托给ajax，这样它将是统一的，并且最初将表加载到documentready上，并根据请求进行更新

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)

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

因为视图是对ajax调用的响应，所以它应该只返回更新页面所需的HTML。那么，为什么要返回index.html模板呢？您应该只使用一个只包含表内容的模板。如果这是表内容，那么视图应该返回HttpResponsetable内容。我计划在显示表后向网页添加更多功能。所以我想保持一致。如果我要使用httpResponse，那么我将不再在同一个页面上。但是renderrequest，'index.html'，context也是一个httpResponse。所以你说的毫无意义。响应是由ajax调用接收的，因此可以忽略响应或以任何方式使用响应，但除非您在javascript.oh ok中显式刷新页面，否则响应不会刷新页面。这对我来说很有意义。谢谢。现在可以用了

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

$(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);
}

<!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>

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)