html django中的AJAX更新变量答案

【问题标题】：AJAX update variable in html djangohtml django中的AJAX更新变量
【发布时间】：2018-02-08 11:23:39
【问题描述】：

我正在尝试使用 AJAX 调用更新 html 页面中的变量：

    {% for q in questions %}
             {% if qdelete == forloop.counter %}
            <div align= Center>
                <button type="submit" class="btn btn-primary btn-small" id="qyesbtn" name="qyesbtn" value="qyesbtn_{{q.id}}">Yes &raquo;</button>
            </div>
            <div align= Center>
                <button type="submit" class="btn btn-primary btn-small" id="qnobtn" name="qnobtn" value="qnobtn">No &raquo;</button> 
            </div>
             {% else %}
             <button type="button" id="qbtn" class="btn btn-primary btn-large" name="qid" value="{{forloop.counter}}" onclick="SetDeleteNum({{forloop.counter}})">Delete &raquo;</button>
             {% endif %}
    {% endfor %}
<script>
function SetDeleteNum(d) {
    var num = -1
    num =  d
    console.log('num: '+num)
    var page = $(this)
    $.ajax({
        type: "POST",
        url: "{% url 'home' %}",
        data: {
            'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val(),
            'qid': num

        },
        dataType: 'json',
        success: function (data) {
          console.log('aa'+JSON.stringify(data))
            page.html(data);

        },
        error: function(e){
            console.log('err: '+JSON.stringify(e))
        }
    });
}

</script>

值 qdelete 应该在 AJAX 调用之后更新为“num”，但它仍然和以前一样，虽然我可以从日志中看到 qdelete 分配了新值，但它根本没有显示在页面中。我还尝试使用“page.html(data);”行将新的“数据”放入新的 html 中但没有运气。有什么想法吗？

【问题讨论】：

从服务器收到的data 中有什么内容？
JS 变量和 django/template 上下文变量之间有一个重要的区别。您应该将 django 模板渲染视为与您的 javascript 不同的世界。这里的目标是什么？要让删除按钮显示一组“是/否”确认按钮？
@wholevinski：如果 qdelete 是一个数字，目标是显示 Y/N 按钮（数字在 for 循环中是相同的，所以如果 qdelete=1 只有第 1 行有 Y/ N个按钮，其他人还有另一个按钮）
所以 qdelete 在页面呈现后实际上从前端消失了。我现在能想到的最简单的方法是将您的“是/否”按钮和“删除”按钮与该索引相关联。可能添加一个属性，使它们可以通过索引查询。然后，为它们查询 DOM 并将它们切换为隐藏或不隐藏。
我不明白...

标签： javascript jquery html ajax django

【解决方案1】：

我找到了解决方案，只需将 ID 放在所有按钮上：

<div align= Center id="qbtn_{{forloop.counter}}" style="display:block">
             <button type="button"  class="btn btn-primary btn-large" name="qid" value="{{forloop.counter}}" onclick="SetDeleteNum({{forloop.counter}})">Delete &raquo;</button>
             </div>
            <div align= Center id="ybtn_{{forloop.counter}}" style="display:none">
                <button type="submit" class="btn btn-primary btn-small" id="qyesbtn" name="qyesbtn" value="qyesbtn_{{q.id}}">Yes &raquo;</button>
            </div>
            <div align= Center id="nbtn_{{forloop.counter}}" style="display:none">
                <button type="button" class="btn btn-primary btn-small" id="qnobtn" name="qnobtn" value="qnobtn" onclick="SetDeleteNum({{forloop.counter}})">No &raquo;</button> 
            </div>

然后我根据计数器值显示/隐藏按钮：

function SetDeleteNum(d) {
    var num = -1
    num =  d
    console.log('num: '+num)        //code to refresh the page
    //var page_y = $( document ).scrollTop();
    //window.location.href = window.location.href + '?page_y=' + page_y;
    //var div = $(this).getElementById("qbtn_"+num.toString())
    console.log('dd: '+'-')
    div_q = document.getElementById("qbtn_"+num.toString())
    div_y = document.getElementById("ybtn_"+num.toString())
    div_n = document.getElementById("nbtn_"+num.toString())
    //div.disabled = true
    if(div_q.style.display == 'block'){
        div_y .style.display = 'block';
        div_n .style.display = 'block';
        div_q.style.display = 'none';
    }   
    else{
        div_q.style.display = 'block';
        div_n .style.display = 'none';
        div_y .style.display = 'none';
    }
    }

希望对其他人有所帮助

【讨论】：

干得好！这几乎就是我的意思。