我有一段代碼使用 AJAX 呼叫每 5 秒重繪 一次 HTML 表
我基本上是清空 HTML 表，然后每 10 秒再次附加其所有資料以實作此目的
像這樣的東西-
$('#_appendHere').html('')
$('#_appendHere').append(response);
_appendHere表的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，但這也做同樣的事情
任何幫助將不勝感激！謝謝！！
uj5u.com熱心網友回復：
我懷疑您的 AJAX 回應每次都包含完整的 Django 回應 - 看起來您也有所有這些換行符<br>以及 AJAX 回應中的搜索表單。
您需要創建一個版本，該版本僅提供您想要放入元素內的內部 HTML（具體來說，只是表格行）。
<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 中然后專門選擇表格來處理接收完整回應。
var div = document.createElement('div');
div.innerHTML = response;
var html = div.querySelector('#_appendHere').innerHTML;
$('#_appendHere').html(html);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/422562.html
標籤：