Ajax 在按钮单击时从 Django 1.9 代码中获取新值答案

【问题标题】：Ajax get new values from Django 1.9 code on button clickAjax 在按钮单击时从 Django 1.9 代码中获取新值
【发布时间】：2016-04-19 04:28:18
【问题描述】：

我正在尝试编写一个代码，当用户想要检查状态时，服务器（AWS 实例）的状态可以返回到浏览器。有时服务器启动可能需要一段时间，所以我想要每次用户单击按钮时刷新状态的值（再次运行 Django 代码以获取新值）。
示例：
[检查状态]（按钮）
WebServer-Test 正在运行（每次单击按钮时都会刷新此行）

到目前为止，我不确定如何让 view.py 再次运行并返回新值以供 html 页面使用。

这是我的观点.py

def indcheckstatus(request, question_id, check_id):
    inst() #runs an update on the instance (instance2[0].update() etc.)
    text1 = 'WebServer-Test %s' % instance1[0].state
    text2 = 'Gluster %s' % instance2[0].state
    text3 = 'Gluster2 %s' % instance3[0].state
    text4 = 'Database %s' % instance4[0].state
    txt1 = 'WebServer-Test'
    txt2 = 'Gluster'
    txt3 = 'Gluster2'
    txt4 = 'Database-Test'
    if check_id == '1': 
        return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text1, 'indserver':txt1})
    elif check_id == '2':
        return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text2, 'indserver':txt2})
    elif check_id == '3':
        return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text3, 'indserver':txt3})
    elif check_id == '4':
        return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text4, 'indserver':txt4})

这是我的 ajax 代码 + html 代码

<html>
<body>
<title>Server Management</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#state").hide()
    var clicking = 1
    $("#button").click(function() {
        $.ajax({
            url : '',
            success : function(response) {
                clicking++
                $('#result').html($('#state').html() + clicking);
                }
            });
        return false;
    });
});

</script>

<noscript>
    Some features require Javascript enabled
</noscript>

<form method="post">
    {%csrf_token%}
    <input id="button" type="button" value="Check Status"></input>
</form>

<div id="result">
{{ indserver }}
</div>

<div id="state">
{{ indstatus }}
</div>

<h2>Status of {{ indserver }}</h2>
<p>{{ indstatus }}</p>

<a href="{% url 'awsservers:index' %}">Go Back</a> 

</body>
</html>

重点是我不想刷新整个页面来加载新值，但我希望在单击按钮时刷新值。

我对 Django 尤其是 Ajax 非常陌生，所以如果我的代码不是很“正确”，请原谅我 :) 我非常感谢您的帮助！如果还有更好的方法从 Django 加载新值，请告诉我！

【问题讨论】：

标签： javascript jquery ajax django django-1.9

【解决方案1】：

所以我能够找到解决方案。

这是我更新的views.py

def indcheckstatus(request, question_id, check_id):
    inst() // does an update of all instances
    text1 = 'WebServer-Test %s' % instance1[0].state
    text2 = 'Gluster %s' % instance2[0].state
    text3 = 'Gluster2 %s' % instance3[0].state
    text4 = 'Database-Test %s' % instance4[0].state
    txt1 = 'WebServer-Test'
    txt2 = 'Gluster'
    txt3 = 'Gluster2'
    txt4 = 'Database-Test'
    if request.is_ajax():  // what to do if ajax code calls function
        if check_id == '1':
            return HttpResponse(text1) // return updated status back to html
        elif check_id == '2':
            return HttpResponse(text2)
        elif check_id == '3':
            return HttpResponse(text3)
        elif check_id == '4':
            return HttpResponse(text4)
    else:
        if check_id == '1':
            return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text1, 'indserver':txt1})
        elif check_id == '2':
            return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text2, 'indserver':txt2})
        elif check_id == '3':
            return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text3, 'indserver':txt3})
        elif check_id == '4':
            return render(request, 'awsservers/indcheckstatus.html', {'indstatus': text4, 'indserver':txt4})

这是我的 html + ajax 代码：

<html>
<body>
<title>Server Management</title>
<p>{{ indserver }} is starting up. </p>

<p>Click the button below to get the status of the server</p>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#state").hide()
    $("#start_id").hide()
    $("#button").click(function() {
        if ($("#start_id:contains('1')").length) {   // to check which server was picked
            $.ajax({
                type: "get",   // requesting updated values from django
                url : '/menu/2/1/status-ind',   // determines which function is called
                success : function(response) {
                    ($('#result').html(response)); 
                } // response is basically "[ServerName ServerState]" form (seen from code above)
            }); 
        }
        else if ($("#start_id:contains('2')").length) {
        ...... // do code 
        }
        return false;
    }); 
});

</script>
<noscript>
    Some features require Javascript enabled
</noscript>
<form method="post">
    {%csrf_token%}
    <input id="button" type="button" value="Check Status"></input>
</form>

<div id="result">
{{ indserver }}
</div>

<div id="state">
{{ indstatus }}
</div>

<div id="start_id">
{{ start_id }}
</div>
<br>
<a href="{% url 'awsservers:index' %}">Go Back</a>
</body>
</html>

我在我的代码中添加了 cmets 来解释我所做的更改。我意识到我必须编写与获取更新值所需的函数相关联的 url，并从那里在我的 views.py 上编写正确的响应以用于 ajax 代码。现在完美运行！

【讨论】：