Django 和 Ajax 簡介

標籤：django   ajax   

在Django裡面，目前我們都是通過前端頁面的form提交GET或者POST請求到後台，幕後處理了業務函數之後，把渲染之後的字串結果發回給前端。這樣的結果是每次頁面都會進行重新整理。

假設一個情境我們使用了模態對話方塊，正常介面開啟的話，對話方塊一般都是隱藏的。如果點開了對話方塊，在模態對話方塊提交的POST請求之後，返回的頁面因為重新重新整理了，他會自動隱藏對話方塊，那如何在模態對話方塊的介面做到資料的驗證？這裡很明顯我們需要和後台交換資料，但是同時又不能重新整理頁面。這裡就需要使用AJAX了。

Javscrpt 裡面AJAX的基本結構很簡單，比如

$.ajax({    url:‘/host‘,        //提交的url，類似form的action    type:‘POST‘,        //提交的類型，類似form的method    data:{‘k1‘:123,‘k2‘:‘root‘},  //提交的資料    success:function(data){    //如果成功，那麼執行這個方法，參數data是伺服器的傳回值，一般建議使用字典格式，字串的字典需要做一個還原序列化的操作        var obj=JSON.parse(data)    }})

下面看看執行個體。

urls.py片段, /test_ajax指向 views.test_ajax 函數

urlpatterns = [    url(r‘^admin/‘, admin.site.urls),    url(r‘^business$‘, views.business),    url(r‘^host$‘, views.host),    url(r‘^test_ajax$‘, views.test_ajax),    url(r‘^app$‘, views.app),    url(r‘^ajax_add_app$‘, views.ajax_add_app),    ]

views.py片段，在該函數裡面，自訂了一個傳回值字典。這樣無論成功與否，都會返回一個資料給前端

裡面做了一個簡單的判斷 如果host長度小於5，返回資料‘主機名稱字太短了’；如果資料庫表的類型不符，會捕獲異常，返回結果‘請求錯誤‘，注意json.dumps(ret) 因為 HttpResponse返回的是字串，因此我們需要序列化一下字典對象

def test_ajax(request):    ret = {‘status‘: True, ‘error‘: None, ‘data‘: None}    try:        h = request.POST.get(‘hostname‘)        i = request.POST.get(‘ip‘)        p = request.POST.get(‘port‘)        b = request.POST.get(‘b_id‘)        if h and len(h) > 5:            models.Host.objects.create(hostname=h,                                           ip=i,                                           port=p,                                           b_id=b)        else:            ret[‘status‘] = False            ret[‘error‘] = "主機名稱字太短了"    except Exception as e:        ret[‘status‘] = False        ret[‘error‘] = ‘請求錯誤‘    return HttpResponse(json.dumps(ret))

host.html片段頁面配置

   <div class="add-modal hide">        <form id="add_form" method="POST" action="/host">            <div class="group">                <input id="host" type="text" placeholder="主機名稱" name="hostname" />            </div>            <div class="group">                <input id="ip" type="text" placeholder="IP" name="ip" />            </div>            <div class="group">                <input id="port" type="text" placeholder="連接埠" name="port" />            </div>            <div class="group">                <select id="sel" name="b_id">                    {% for op in b_list %}                    <option value="{{ op.id }}">{{ op.caption }}</option>                    {% endfor %}                </select>            </div>            <input type="submit" value="提交" />            <a id="ajax_submit" >悄悄提交</a>            <input id="cancel" type="button" value="取消" />            <span id="erro_msg" style="color: red"></span>        </form>

jquery片段，注意JSON.parse(data)，需要做一個還原序列化

$(‘#ajax_submit‘).click(function(){                $.ajax({                    url: "/test_ajax",                    type: ‘POST‘,                    data: {‘hostname‘: $(‘#host‘).val(), ‘ip‘: $(‘#ip‘).val(), ‘port‘: $(‘#port‘).val(), ‘b_id‘: $(‘#sel‘).val()},                                  success: function(data){                        var obj = JSON.parse(data);                        if(obj.status){                            location.reload();                        }else{                            $(‘#erro_msg‘).text(obj.error);                        }                    }                })

運行結果：

主機名稱小於5

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M02/9C/EB/wKioL1l3-GvAskdHAADS3vO6wZo530.jpg" title="e1.JPG" style="float:none;" alt="wKioL1l3-GvAskdHAADS3vO6wZo530.jpg" />

資料類型不對報錯

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M01/9C/EB/wKiom1l3-GjgoTWlAAD42ZofxfM747.jpg" style="float:none;" title="e2.JPG" alt="wKiom1l3-GjgoTWlAAD42ZofxfM747.jpg" />

本文出自 “麻婆豆腐” 部落格，請務必保留此出處http://beanxyz.blog.51cto.com/5570417/1951021

Django 和 Ajax 簡介