无法刷新 DIV python Django 中的数据，也无法刷新 jquery 后的页面

Question

让我开始说，我在一个HTML模板中有两个变量(消息和用户)我有多个按钮，当其中一个被点击它调用jquery代码发送一个post请求到Django服务器它返回一个更新到变量(消息)然而，它没有更新循环，我也试图返回一个新的HTML页面，其中包含新的变量已更新但jquery没有更新整个页面与新的HTML

如果我可以单独更新变量，那就更好了，如果我不能这样做，我怎么能让jquery使用新的HTML页面我用来向变量消息返回更新的python代码:

if request.method == 'POST':
send=Message.objects.filter(from_id=request.POST.get('userId'),to_id=2)
rec=Message.objects.filter(from_id=2,to_id=request.POST.get('userId'))
messages=sorted(chain(rec, send),key=lambda instance: instance.id,reverse=True)
print(messages)
return HttpResponse(list(messages))

和用于返回新HTML模板的代码:

m = Message.objects.filter(to_id=2).order_by('-id')
users = {}
for i in m:
if users.get(i.from_id.username) == None:
users[i.from_id.username] = User.objects.get(id=i.from_id.id)
users = list(users.values())
send=Message.objects.filter(from_id=users[0].id,to_id=2)
rec=Message.objects.filter(from_id=2,to_id=users[0].id)
messages=sorted(chain(rec, send),key=lambda instance: instance.id,reverse=True)
if request.method == 'POST':
send=Message.objects.filter(from_id=request.POST.get('userId'),to_id=2)
rec=Message.objects.filter(from_id=2,to_id=request.POST.get('userId'))
messages=sorted(chain(rec, send),key=lambda instance: instance.id,reverse=True)
print(messages)
return render(request,'psych.html',{"users":users, "messages":list(messages)})
return render(request,'psych.html',{"users":users, "messages":list(messages)})

使用变量的HTML代码和jquery代码，并尝试更新它

function newUser(id){
$.ajax({
type: 'POST',
url:'/psych.html/',
data:{
userId:id,
},
success: function(data){
console.log(data);// the data returnd are correct and as needed
//but i cant make it update the messages
$('#messageDiv').load(document.URL +  ' #messageDiv');
}
})
}

{% for i in users %}
<li class="">
<button type="button" class="btn" onClick="newUser({{i.id}})">
<div class="d-flex bd-highlight">
<div class="img_cont">
<!-- here was an image ----------------------------------------------->

</div>
<div class="user_info">
<span>{{i.id}}</span>

</div>
</div>
</button>
</li>

{% endfor %}
<!-- The varialbe that i'm trying to update is called messages bottom -->
{% for o in messages %}
{% if o.to_id.id != 2 %}

<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<!-- here was an image-->
</div>
<div class="msg_cotainer">
{{o.message}} 
<!-- <span class="msg_time">{{o.time}}</span> -->
</div>
</div>
{% else %}
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
{{o.message}}
<!-- <span class="msg_time_send">{{o.time}}</span> -->
</div>
<div class="img_cont_msg">
<!-- here was an image-->
</div>
</div>
{% endif %}
{% endfor %}

如果它有帮助的话，我以前做过并从jquery更新消息但我使用的是表单，只有一个变量我也会添加代码

$(document).on('submit','#submitMessage', function (e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'/psych.html/',
data:{
message:$('#messageHolder').val(),
csrfmiddlewaretoken: $('input[message=csrfmiddlewaretoken]').val(),
},
success: function(data){
// it work like charm here 
$('#messageDiv').load(document.URL +  ' #messageDiv');
}
})
})

{% for o in messages %}
{% if o.to_id.id == 2 %}
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<!-- here was an image-->
</div>
<div class="msg_cotainer">
{{o.message}} 
<!-- <span class="msg_time">{{o.time}}</span> -->
</div>
</div>
{% else %}
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
{{o.message}}
<!-- <span class="msg_time_send">{{o.time}}</span> -->
</div>
<div class="img_cont_msg">
<!-- here was an image-->
</div>
</div>
{% endif %}
{% endfor %}
<form id="submitMessage" >
{% csrf_token %}
<div class="card-footer">
<div class="input-group">
<div class="input-group-append"></div>
<input name="message" class="form-control type_msg" placeholder="Type your message..." id="messageHolder">
<div class="input-group-append">
<button type="submit" class="btn">
<span class="input-group-text send_btn" ><i class="fas fa-location-arrow"></i></span>
</button>
</div>
</div>
</div>
</form>

Answer 1

试试这个

$("#messageDiv").load(location.href+" #messageDiv>*");

Answer 2

我发现了问题，因为我不知道

$("#messageDiv").load(location.href+" #messageDiv>*");

会发出GET请求，所以我所做的就是将必要的数据添加到URL中，然后更改URL(因此，如果客户端刷新页面，它将留在同一位置)，而不刷新页面，然后在那里执行命令应用程序如果它能帮助任何人，请看看下面的代码:

function newUser(id){
var url = document.URL;
url = url.split('/');

url[url.length-2] = id;
url = url.join('/');
window.history.pushState("object or string", "my website name", url);
$('#messageDiv').load(url +  ' #messageDiv');
}

遗憾的是，我不知道如何做帖子请求，然后加载页面，请如果你知道下面的评论，这样别人可能会得到帮助