【发布时间】：2022-01-01 03:16:15
【问题描述】：
我有一个for 循环，它从服务器获取按降序排序的数据，但在append() 中，数据排序不起作用。例如，第一行显示在第二个位置。
我如何才能完全按照从服务器端数据中排序的方式追加数据？
$(document).on('click', '#jhchat', function() {
$('.jhchat').find('.messagemoda').html('');
var jus = '{{Auth::user()->id}}';
$.ajax({
url: '{{url("getuchats")}}',
type: 'post',
data: {
_token: CSRF_TOKEN
},
success: function(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[0].s_id == jus) {
var mid = data[i].r_id;
} else {
var mid = data[i].s_id;
}
$.ajax({
url: '{{url("getchatdet")}}',
type: 'post',
data: {
_token: CSRF_TOKEN,
'mid': mid,
'chid': data[i].id
},
success: function(res) {
$('.jhchat').find('.messagemoda').append(`
<div class="row mt-3 conv` + res.chat.id + `" alt="` + res.chat.id + `">
<div class="col-11 row mt-2 ads chads cchat` + res.chat.id + `" alt="` + res.chat.id + `" id="` + res.mid + `">
<div class="col-3" style="padding-left: 5px;">
<img src="` + res.img + `" alt="home" width="60" height="60" class="rounded-circle">
</div>
<div class="col-8">
<h6 class="mt-4 text-end">` + res.name + ' ' + (res.mescount > 0 ? '<span class="me-4" style="color: crimson;background-color: bisque;border-radius: 50%;padding-left: 5px;padding-right: 5px;">' + res.mescount + '</span>' : '') + `</h6>
</div>
</div>
<div class="col-1 mt-4 ps-0 ms-0 float-start text-start" style="position: relative;">
<img src="{{url('images/menu.png')}}" alt="` + res.chat.id + `" width="32px" height="32px" class="hmenu" style="cursor: pointer;background-color: #eee;border-radius: 50%;padding:8px;">
<div class="smenu` + res.chat.id + ` jsmen">` + (res.justo > 0 ? '<a class="me-2 jsmenitem d-block" href="' + res.s + '">go store <img style="margin-right: 2rem;" src="{{url('images / arrow1.png ')}}" width="13px" height="13px"></a>' : '') + `
<p class="text-danger delconv mt-2 mb-0 me-2 jsmenitem" alt="` + res.chat.id + `" style="cursor: pointer;">delete <img style="margin-right: 3.4rem;" src="{{url('images/close1.png')}}" width="10px" height="10px"></p>
</div>
</div>
</div>`);
}
});
}
$(".messagemoda").trigger("update");
} else {
$('.jhchat').find('.messagemoda').html('<div class="mt-5 text-center">no data</div>');
}
}
});
$('.adsopa').css('opacity', '0.3');
$('.sidebarmenu').removeClass('active');
$('.jhchat').css("display", "block");
$('body').css('overflow-y', 'hidden');
});
【问题讨论】：
-
问题将是因为您在
for循环中发送了多个 AJAX 请求，并且由于它们是异步的，它们都将在不同的时间返回。要解决此问题（并提高性能并降低服务器成本），请停止循环发送 AJAX 请求。在单个请求中发送单个数组并从该请求中返回所有相关数据。另外 - 你为什么要连接模板文字？它们的重点是使用插值，而不是串联。 -
有没有办法通过一个请求而不是为每条记录单独请求来获取您需要的所有数据？因为这里可能发生的是请求以随机顺序完成（异步和全部）。或者，您可以将结果数据保存在内存数组中，并在每个完成的请求后重新排序/重新渲染。但最简单的方法可能是能够在单个请求中执行此操作。
标签： javascript jquery ajax