Django中的Ajax

Ajax

  众多时节,我们于网页上求操作时,不欲刷新页面。实现这种力量的技巧将Ajax!(本人定义,不可迷信)

 

jQuery中的ajax就足以兑现非刷新页面就能够向后台请求或交数据的效应,我们依然用她来开django中的ajax,所以先拿jquey下充斥下来,版本更强更好。

 

一样、ajax发送简单数据类型:


html代码
:在此地我们仅发送一个简短的字符串

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <input type="button" onclick="AjaxSubmit();" value="提交">
10 
11 
12 <script src="/static/jquery-1.12.1.min.js"></script>
13 <script>
14     function AjaxSubmit(){
15         var host = '1.1.1.1';
16         var port = '1111';
17         $.ajax({
18             url:"/app01/ajax_submit/",
19             type:'POST',
20             data:{host:host,port:port},
21             success: function (arg) {
23             }
24 
25         });
26     }
30 </script>
31 
32 </body>
33 </html>

 

django下app里views.py

# coding:utf-8
from django.shortcuts import render,HttpResponse


def ajax_submit(request):

    print request.POST     #客户端发来的数据
    return render(request,'ajax_submit.html')

打印出来的数量样式:

图片 1

 

 

其次、ajax发送复杂的数据类型:

html代码:在这里我们唯有发送一个列表中含有字典数据类型

由于发送的数据类型为列表
字典的格式,我们提前要拿它们转换成为字符串形式,否则后台程序接收到之数格式不是咱纪念使的门类,所以在ajax传输数据时得JSON

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <input type="button" onclick="AjaxSubmit_set();" value="提交集合">
10 
11 <script src="/static/jquery-1.12.1.min.js"></script>
12 <script>
13 
14 
15         function AjaxSubmit_set(){
16         var data_list = [
17             {'name':'chenchao','age':18},
18             {'name':'lisi','age':19},
19             {'name':'wangwu','age':13}
20 
21         ];
22 
23         $.ajax({
24             url:"/app01/ajax_submit_set/",
25             type:'POST',
26             tradition:true,   原生模式
27             data:{data:JSON.stringify(data_list)},
28             success: function (arg) {
29 
30             }
31 
32         });
33     }
34 
35 </script>
36 
37 </body>
38 </html>

 

django下app里views.py

1 def ajax_submit_set(request):
2     print request.POST
3     return render(request,'ajax_submit.html')

打印出的数额样式:

图片 2

 

 

 

三、稍等、还没完。

虽然我们贯彻了作用,但马上尚不够,因为展示不是死正统,所以我们小作处理。

success:
function (arg) { }  如果ajax提交数据成功,那么即使见面自动执行及时中的函数

html代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <input type="button" onclick="AjaxSubmit();" value="提交">
10 <input type="button" onclick="AjaxSubmit_set();" value="提交集合">
11 
12 <script src="/static/jquery-1.12.1.min.js"></script>
13 <script>
14     function AjaxSubmit(){
15         var host = '1.1.1.1';
16         var port = '1111';
17         $.ajax({
18             url:"/app01/ajax_submit/",
19             type:'POST',
20             data:{host:host,port:port},
21             success: function (arg) {
22             }
23         });
24     }
25 
26         function AjaxSubmit_set(){
27         var data_list = [
28             {'name':'chenchao','age':18},
29             {'name':'lisi','age':19},
30             {'name':'wangwu','age':13}
31         ];
32 
33         $.ajax({
34             url:"/app01/ajax_submit_set/",
35             type:'POST',
36             tradition:true,
37             data:{data:JSON.stringify(data_list)},
38             success: function (arg) {    //如果程序执行成功就会执行这里的函数
39                 var callback_dic = $.parseJSON(arg);
40 
41                 if(callback_dic.status){ 
42                     alert('成功');
43                 }else{
44                     alert(callback_dic.error); //把错误的信息从后台提出展示出来
45                 }
46             }
47         });
48     }
49 
50 </script>
51 
52 </body>
53 </html>

 

django下app里views.py

 1 # coding:utf-8
 2 from django.shortcuts import render,HttpResponse,redirect
 3 def ajax_submit(request):
 4 
 5     print request.POST
 6     return render(request,'ajax_submit.html')
 7 
 8 
 9 import json
10 
11 
12 def ajax_submit_set(request):
13     ret = {'status': True,'error': ""}
14     try:
15         print request.POS
16     except Exception, e:
17         ret['status'] = False
18         ret['error'] = str(e)
19     j_ret = json.dumps(ret)
20     return HttpResponse(j_ret)

 

相关文章