Django中的Ajax

時間 2019-11-21

標籤 django ajax 欄目 Python 简体版

原文原文鏈接

Ajax

　　不少時候，咱們在網頁上請求操做時，不須要刷新頁面。實現這種功能的技術就要Ajax！（本人定義，不可迷信）html

jQuery中的ajax就能夠實現不刷新頁面就能向後臺請求或提交數據的功能，咱們仍然用它來作django中的ajax，因此先把jquey下載下來，版本越高越好。jquery

1、ajax發送簡單數據類型：

html代碼：在這裏咱們僅發送一個簡單的字符串ajax

 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.pydjango

# coding:utf-8
from django.shortcuts import render,HttpResponse def ajax_submit(request): print request.POST     #客戶端發來的數據
    return render(request,'ajax_submit.html')

打印出來的數據樣式:json

2、ajax發送複雜的數據類型：

html代碼：在這裏咱們僅發送一個列表中包含字典數據類型app

因爲發送的數據類型爲列表字典的格式，咱們提早要把它們轉換成字符串形式，不然後臺程序接收到的數據格式不是咱們想要的類型，因此在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.pyurl

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

打印出來的數據樣式:spa

3、稍等、還沒完。

雖然咱們實現了功能，但這還不夠，由於顯得不是很專業，因此咱們稍做處理。code

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)

相關標籤/搜索

django+ansible+ajax

django+jquery+ajax+post

python3+pycharm+django+django

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。