1. 程式人生 > >django+js+ajax重新整理頁面

django+js+ajax重新整理頁面

在伺服器開發的時候,為了方便將伺服器對外開一個介面來操作,可以使用django製作網頁,通過頁面來操作伺服器。這樣可以將伺服器的維護工作暴漏在更加友好的介面操作,而非通過SecureCRT去敲指令。而且還能提供給策劃運維人員來處理一些常規的事情。
這裡將會講解一個非常小的知識點:

js如何發起一次請求
django如何響應請求
js接收到響應如何區域重新整理頁面

js部分

我們先在html中定義一個button,並且將id設定成btnTerminalSvr。定義一個反饋的靜態標題ntfText

        <h2 id="ntfText" >
就緒</h2></br> <button type="button" class="btn btn-success" id="btnTerminalSvr">關閉伺服器</button>

編寫js來響應這個button的事件

<script type="text/javascript">
 $('#btnTerminalSvr').on('click', function () {
        alert('嘿,我聽說您點選了按鈕...' );
        ...
   });
</script>

完善一次ajax請求的請求呼叫,以及回撥之後的處理:

<script type="text/javascript">
  $("#btnTerminalSvr").click(function(){
          $.ajax({
                url: './terminal_svr',
                type: 'POST',
                data: {},
                dataType: 'json',
                timeout: 10000,
                success: function(result) {
if ( result.result == "post_success" ) { $("#ntfText").html("發起成功"); }else { $("#ntfText").html("重複發起了"); } } }); });
</script>

在這裡我們能在data裡面填寫一些json格式的資料結構,這樣就能附帶一些訊息提供給伺服器做呼叫。當呼叫成功之後他將會回撥function(result)。這種寫法是js的非同步慣用寫法,當伺服器做出相應之後也我們能通過jQuery框架直接去修改id=ntfText部分的html字串了。

django部分

第一步:我們先定義django的url相應的對映

    url(r'^terminal_svr', views.terminal_svr,name='terminal_svr'),

第二步:在views.py中實現這個處理函式

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def terminal_svr(request):
    # 這裡利用了django自身的登陸驗證系統
    if not request.user.is_authenticated():
        return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/admin/'))

    doSomething to terminal svr
    a = {}
    a["result"] = "post_success"
    return HttpResponse(json.dumps(a), content_type='application/json')

這塊就比較簡單了,我們可以讀取request中的json傳過來的資訊,並且當操作成功後通過json串返回一個字串給前段來判斷是否操作成功。