首頁 > web前端 > js教程 > Django Ajax的使用教學

Django Ajax的使用教學

亚连
發布: 2018-05-22 13:57:44
原創
1327 人瀏覽過

這篇文章主要介紹了Django Ajax的使用教學,需要的朋友可以參考下

#簡介:

##AJAX = Asynchronous JavaScript and XML(非同步的JavaScript 和XML)。

AJAX 不是新的程式語言,而是一種使用現有標準的新方法。

AJAX 是與​​伺服器交換資料並更新部分網頁的藝術,在不重新載入整個頁面的情況下。

Ajax

  很多時候,我們在網頁上請求操作時,不需要重新整理頁面。實現這種功能的技術就要Ajax!

jQuery中的ajax就可以實現不刷新頁面就能向後台請求或提交資料的功能,現用它來做django中的ajax,所以先把jquey下載下來,版本越高越好。

一、ajax傳送簡單資料型別:

html程式碼:在這裡我們只傳送一個簡單的字串

#views.py

 #coding:utf8
 from django.shortcuts import render,HttpResponse,render_to_response
 def Ajax(request):
   if request.method=='POST':
     print request.POST
     return HttpResponse('执行成功')
   else:
     return render_to_response('app03/ajax.html')
登入後複製

ajax.html

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Ajax</title>
 </head>
 <body>
   <input id=&#39;name&#39; type=&#39;text&#39; />
   <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />
   <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>
   <script type=&#39;text/javascript&#39;>
   function DoAjax(){
     var temp = $(&#39;#name&#39;).val();
     $.ajax({
       url:&#39;app03/ajax/&#39;,
       type:&#39;POST&#39;,
       data:{data:temp},
       success:function(arg){
         console.log(arg);
       },
       error:function(){
         console.log(&#39;failed&#39;)
       }
     });
   }
   </script>
 </html>
登入後複製

運行,結果:

二、ajax傳送複雜的資料型別:

html代碼:在這裡只發送一個列表中包含字典資料類型

由於發送的資料類型為列表字典的格式,我們提前要把它們轉換成字串形式,否則後台程式接收到的資料格式不是我們想要的類型,所以在ajax傳輸資料時需要JSON

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-">
 <title>Ajax</title>
 </head>
 <body>
   <input id=&#39;name&#39; type=&#39;text&#39; />
   <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />
   <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>
   <script type=&#39;text/javascript&#39;>
   function DoAjax(){
     var temp = $(&#39;#name&#39;).val();
     $.ajax({
       url:&#39;app03/ajax/&#39;,
       type:&#39;POST&#39;,
       data:{data:temp},
       success:function(arg){
         var obj=jQuery.parseJSON(arg);
         console.log(obj.status);
         console.log(obj.msg);
         console.log(obj.data);
         $(&#39;#name&#39;).val(obj.msg);
       },
       error:function(){
         console.log(&#39;failed&#39;)
       }
     });
   }
   </script>
 </html>
登入後複製

#views.py

##
 #coding:utf
 from django.shortcuts import render,HttpResponse,render_to_response
 import json
 # Create your views here.
 def Ajax(request):
   if request.method==&#39;POST&#39;:
     print request.POST
     data = {&#39;status&#39;:,&#39;msg&#39;:&#39;请求成功&#39;,&#39;data&#39;:[&#39;&#39;,&#39;&#39;,&#39;&#39;]}
     return HttpResponse(json.dumps(data))
   else:
     return render_to_response(&#39;app/ajax.html&#39;)
登入後複製

列印資料樣式:

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

Ajax 配合node js multer 實作檔案上傳功能


dwz 如何去掉ajaxloading(圖文教學)


Ajax跨域請求的原理(圖文教學)


##

以上是Django Ajax的使用教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板