在 html 页面上 AJAX 调用期间附加的额外元素

Question

我有一段代码使用 AJAX 调用

每 5 秒刷新一次 HTML table

我基本上是清空 HTML table 然后每 10 秒再次附加它的所有数据来实现这个

像这样 -

$('#_appendHere').html('')
$('#_appendHere').append(response);

其中 _appendHere 是 table

的 id 属性

这是我的 HTML 代码 -（数据正在从我的 Django 视图传递到此页面）

<body>
    <div>
        <div>
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>

    <table id="_appendHere" class="table table-striped table-condensed">
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
        {% for item in info_data %}
          <tr>
            <td>{{item.username}}</td>
            <td>{{item.email}}</td>
            <td>{{item.gender}}</td>
          </tr>
        {% endfor %}
      </table>

</body>

CSS-

<style>
    table, td, th {  
        border: 1px solid #ddd;
        text-align: left;
    }
    
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 15px;
    }
</style>

这是 javascript 部分 -

var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: {% url 'App1:tempPage' %},  // URL to your view that serves new info
            data: {'append_increment': append_increment},
        })
        .done(function(response) {
            $('#_appendHere').html('')
            $('#_appendHere').append(response);
            append_increment += 10;
        });
    }, 5000)

正在呈现同一页面的 Django 视图中对此 URL 发出 GET 请求 -

from django.contrib import admin
from django.urls import path,include
from App1 import views
app_name = 'App1'

urlpatterns = [
    path('temp/', views.tempPage,name="tempPage"),
]

views.py 文件 -

from django.shortcuts import render
from App1.models import Info

# Create your views here.
def tempPage(request):
 
    info_data = Info.objects.all()
    context={"info_data":info_data}
    return render(request, 'App1/temp1.html', context)

出于某种原因，这段代码也附加了输入标签（搜索框）..但只附加了一次

我不确定为什么会这样

我尝试将 input 标签放在不同的 div 中，但它也做了同样的事情

非常感谢任何帮助！！谢谢！！

Answer 1

我怀疑您的 AJAX 响应每次都包含完整的 Django 响应 - 看起来您也有所有这些 line-breaks <br> 以及 AJAX响应。

您需要创建一个仅提供要放入元素内部的 HTML 的版本（具体来说，只是 table 行）。

    <tr>
      <th>Username</th>
      <th>Email</th>
      <th>Gender</th>
    </tr>
    {% for item in info_data %}
      <tr>
        <td>{{item.username}}</td>
        <td>{{item.email}}</td>
        <td>{{item.gender}}</td>
      </tr>
    {% endfor %}

只需响应中的行，您就可以“一次性”将它们替换为：

$('#_appendHere').html(response);

或者，您可以通过将其加载到 jQuery 然后专门选择 table 来处理接收完整响应。

var div = document.createElement('div');
div.innerHTML = response;

var html = div.querySelector('#_appendHere').innerHTML;

$('#_appendHere').html(html);

在 html 页面上 AJAX 调用期间附加的额外元素

Extra elements getting appended during AJAX call on html page

html

javascript

css

ajax

jquery