我是Java，Jquery和Ajax请求的新手，我的脚本执行有问题。
基本上，我的首页上有一个很长的列表要显示（1200多个项目）。我过去通常正常加载页面，但是由于列表加载时间很长（而且正好位于页面中间），因此所有HTML元素显示之前都会有巨大的延迟。例如，我的页脚将是要加载的最后一个项目，并且在导航栏之后几乎会显示一整秒。
我决定使用AJAX请求先加载HTML，完成导航栏和页脚，然后才获取列表以在页面中间显示它。
我遇到的第一个问题是，在处理脚本时，没有任何显示。这意味着，即使我的第一个列表项的“ tr”准备好了，它也只会在第1200个“ tr”也准备好时显示。我需要逐步填充表格。我可以在控制台中看到生成的“ tr”，但仅在完成后（在12'500ms之后）将它们应用到HTML中。
我的第二个问题是，在处理相同的脚本时，我的页面无法响应我的请求。例如，直到脚本完成后，我才能“检查”或单击页面上的任何按钮。这是令人担忧的，因为即使解决了第一个问题，我仍然有大约12'500毫秒的无响应页面。
我使用的代码如下：
$(document).ready(function(){
console.log( "Document Ready" );
$.ajax({
url: "update_list/",
type: 'get',
success:function(response) {
buildTable(response)
}
});
});
先前代码片段中提供的URL链接到我的Django后端中的该视图：（我要提取的列表项目是公司股票）
def update_list(request, *args, **kwargs):
if request.is_ajax():
stocks = StockListView().get_queryset().values('symbol', 'company_name', 'market_cap')
return JsonResponse({"stocks_serialized": list(stocks)})
然后，这是用以下命令填充我的HTML表的脚本：
function buildTable(data){
var table = document.getElementById('tableId')
const values = Object.values(data);
//this step is because I get a dictionary with an array as its first value. We only need the array for the next part.
const stock_list = values[0]
for (var i = 0; i < stock_list.length; i++){
var row = `<tr>
<td>${stock_list[i].symbol}</td>
<td>${stock_list[i].company_name}</td>
<td>${stock_list[i].market_cap}</td>
</tr>`
table.innerHTML += row
console.log( row )
}
}
有人知道如何解决这些问题吗？我是否需要将策略更改为AJAX，以便在向下滚动触发器上仅请求列表的一小部分增量？当时我的列表中只有大约20个元素出现，其余的只能通过在我的表格中向下滚动来访问。
谢谢大家的帮助！
我在Jquery的网站上找到了解决我问题的方法： https://www.tutorialrepublic.com/faq/how-to-add-remove-table-rows-dynamically-using-jquery.php
function buildTable(data){
const values = Object.values(data);
const stock_list = values[0]
for (var i = 0; i < stock_list.length; i++){
//We first declare the variables for each <td> we need
var symbol = stock_list[i].symbol
var comanyName = stock_list[i].company_name
var market_cap = stock_list[i].market_cap_rounded
//We then append them to a string in html fashion
added_row = '<tr>'
+ '<td>' + symbol + '</td>'
+ '<td>' + comanyName + '</td>'
+ '<td>' + market_cap + '</td>'
+ '</tr>'
//To finally append this long string to your table through it's ID:
$('#tableId').append(added_row)
};
};
这使我的主页更快并且解决了我的两个问题。
该步骤似乎使页面速度大大降低了：
table.InnnerHtml += row
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句