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

数据类型不对报错

本文转自 beanxyz 51CTO博客，原文链接：http://blog.51cto.com/beanxyz/1951021，如需转载请自行联系原作者