时间戳

首页 > 解决方案 > 无法刷新 DIV python Django 中的数据，也无法刷新 jquery 之后的页面

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

问题描述

首先让我说我在 HTML 模板中有 2 个变量（消息和用户），并且我有多个按钮，当单击其中一个按钮时，它会调用 jquery 代码，该代码将发布请求发送到 Django 服务器并返回更新到一个变量（消息）但是，它没有更新循环，我还尝试返回一个新的 HTML 页面，其中包含更新的新变量，但 jquery 没有用新的 HTML 更新整个页面

如果我可以单独更新变量会更好，如果我不能这样做，我怎样才能让 jquery 使用新的 HTML 页面我用来将更新返回到 varialbe 消息的 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 的消息，但我使用了表单并且只有 1 个变量，我也会将代码添加到该变量中

$(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>

标签： javascripthtmljquerycssdjango

解决方案

尝试这个

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

推荐阅读