大家好，欢迎来到IT知识分享网。
轮询:前端每隔固定时间向后台发送一次请求，询问服务器是否有新数据
轮询的工作流程
1.前端发送数据
2.后端接收处理数据
3.前端定时请求数据
4.后端返回新数据
一、发送-接收数据
// 前端
<div class="message" id="message">
<div>
<input type="text" id="txt" placeholder="请输入">
{#发送按钮绑定点击事件#}
<input type="button" value="发送" onclick="sendMessage();">
</div>
{#jquery cdn #}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 发送数据
function sendMessage() {
var text = $("#txt").val();
// 基于ajax将用户输入的文本信息发送到后台
$.ajax({
url: '/pool/send/msg/',
type: 'GET',
data: {
text: text
},
success: function (res) {
console.log('请求发送成功', res)
}
})
}
</script>#views
# 假设DB是我们的缓存数据库
DB = []
def views(request):
return render(request, 'home.html')
def send_msg(request):
print('接收到到前端请求', request.GET)
text = request.GET.get('text')
# 将接收到的请求添加进数据库
DB.append(text)
return HttpResponse('ok')
二、定时请求、更新数据
// 前端
// 设置用户的的数据索引
max_index = 0;
// 每隔固定向后台发送请求获取数据并展示在界面上
setInterval(function () {
// 发送请求获取数据
$.ajax(
{
url: '/pool/get/msg/',
type: 'GET',
data: {
index: max_index
},
success: function (dataDict) {
// 将后端返回到index传给全局变量
max_index = dataDict.max_index
$.each(dataDict.data, function (index, item) {
// 将内容拼接成div标签，添加到message区域
var tag = $('<div>')
tag.text(item)
$("#message").append(tag);
})
}
}
)
}, 1000)// 间隔时间，单位毫秒#views
def get_msg(request):
index = request.GET.get('index')
index = int(index)
# 将接收到数据从数据库取处理出来返回,通过索引处理，如果是之前到老数据，不重复显示
context = {
'data': DB[index:],
# 将当前用户数据最大索引返回给前端
'max_index': len(DB)
}
return JsonResponse(context)免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/28304.html
