Django 和 Ajax 简介
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
数据类型不对报错
本文出自 “麻婆豆腐” 博客,请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1951021
以上是关于Django 和 Ajax 简介的主要内容,如果未能解决你的问题,请参考以下文章