Django 和 Ajax 简介

简介:

在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 :
         =  request.POST.get( 'hostname' )
         =  request.POST.get( 'ip' )
         =  request.POST.get( 'port' )
         =  request.POST.get( 'b_id' )
         if  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

wKioL1l3-GvAskdHAADS3vO6wZo530.jpg


数据类型不对报错

wKiom1l3-GjgoTWlAAD42ZofxfM747.jpg







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

目录
相关文章
|
24天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX**是异步JavaScript和XML技术,用于创建快速动态网页,无需完全刷新页面即可更新内容。通过后台数据交换实现局部更新,常见于应用如微博、Google地图。传统网页必须整体重载来显示新内容。
|
20小时前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML技术,用于不完全刷新页面而更新内容。它实现网页的快速动态更新,通过后台数据交换使用户体验更流畅。例如,微博、Google地图和社交网络都应用了AJAX,提升交互性而无需完整加载页面。
|
2天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX**是异步JavaScript和XML的缩写,它让网页能不完全刷新而更新内容。通过与服务器交换少量数据,实现动态、快速的用户体验。在AJAX之前,更新内容需重载整个页面。常见应用如微博、Google地图和社交网络。
|
4天前
|
XML JSON 前端开发
AJAX 简介
**AJAX** 是异步更新网页的技术,无需整体加载。它用 JavaScript 和 XML(虽现在多用JSON)实现动态交互。比如,Google Maps和微博,利用AJAX实现内容局部刷新,提升用户体验。传统网页更新需完整重载。[≤240字符]
|
13天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML的组合,用于创建快速动态网页。它无需全页刷新,仅通过后台与服务器交换少量数据实现部分网页更新。在传统网页中,内容更新需完整重载。示例应用:新浪微博、Google地图、开心网。
|
15天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML技术,用于不完全刷新网页而更新内容。它实现局部刷新,提高网页互动性,如Google地图和微博。传统网页需全页重载更新,而AJAX改变这一模式。
|
23天前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
10天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML技术,用于不完全刷新页面而更新内容。它实现网页的快速动态交互,允许后台数据交换以异步更新部分区域。常见应用如微博、Google地图。传统网页需整体重载来更新。
|
1月前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 允许网页仅更新部分内容,无需完全重载,它是异步JavaScript和XML技术的结合,加速了动态网页的交互。通过后台数据交换,实现页面的即时更新,如微博、Google地图等应用皆有运用。
|
1月前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX**是异步JavaScript和XML的缩写,它让网页能无需整体刷新即可更新部分内容。通过后台数据交换,实现动态、快速的用户体验。在不全载页面的情况下,AJAX可实现局部更新,常见应用如微博、地图和社交网络。在传统网页中,内容更新需完全重载页面。