在Django里面，目前我们都是通过前端页面的form提交GET或者POST请求到后台，后台处理了业务函数之后，把渲染之后的字符串结果发回给前端。这样的结果是每次页面都会进行刷新。
假设一个场景我们使用了模态对话框，正常界面打开的话，对话框一般都是隐藏的。如果点开了对话框，在模态对话框提交的POST请求之后，返回的页面因为重新刷新了，他会自动隐藏对话框，那如何在模态对话框的界面做到数据的验证？这里很明显我们需要和后台交换数据，但是同时又不能刷新页面。这里就需要使用AJAX了。
Javscrpt 里面AJAX的基本结构很简单，比如
|
1
2
3
4
5
6
7
8
9
|
$.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 函数
|
1
2
3
4
5
6
7
8
9
|
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返回的是字符串，因此我们需要序列化一下字典对象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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片段页面布局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<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)，需要做一个反序列化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$('#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，如需转载请自行联系原作者