Django Ajax的使用

来源:http://www.cnblogs.com/qianyuliang/archive/2017/06/02/6934583.html
-Advertisement-
Play Games

簡介: AJAX = Asynchronous JavaScript and XML(非同步的 JavaScript 和 XML)。 AJAX 不是新的編程語言,而是一種使用現有標準的新方法。 AJAX 是與伺服器交換數據並更新部分網頁的藝術,在不重新載入整個頁面的情況下。 Ajax 很多時候,我們在 ...


簡介:

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

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

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

 

Ajax

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

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

一、ajax發送簡單數據類型:

html代碼:在這裡我們僅發送一個簡單的字元串

views.py

 1 #coding:utf8
 2 from django.shortcuts import render,HttpResponse,render_to_response
 3 
 4 def Ajax(request):
 5     if request.method=='POST':
 6         print request.POST
 7 
 8         return HttpResponse('執行成功')
 9     else:
10         return render_to_response('app03/ajax.html')

ajax.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Ajax</title>
 6 </head>
 7 <body>
 8     <input id='name' type='text' />
 9     <input type='button' value='點擊執行Ajax請求' onclick='DoAjax()' />
10 
11     <script src='/static/jquery/jquery-3.2.1.js'></script>
12     <script type='text/javascript'>
13      function  DoAjax(){
14          var temp = $('#name').val();
15          $.ajax({
16              url:'app03/ajax/',
17              type:'POST',
18              data:{data:temp},
19              success:function(arg){
20                  console.log(arg);
21              },
22              error:function(){
23                  console.log('failed')
24              }
25          });
26      }
27     </script>
28 </html>

運行,結果:

 

 

二、ajax發送複雜的數據類型:

html代碼:在這裡僅發送一個列表中包含字典數據類型

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

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Ajax</title>
 6 </head>
 7 <body>
 8     <input id='name' type='text' />
 9     <input type='button' value='點擊執行Ajax請求' onclick='DoAjax()' />
10 
11     <script src='/static/jquery/jquery-3.2.1.js'></script>
12     <script type='text/javascript'>
13      function  DoAjax(){
14          var temp = $('#name').val();
15          $.ajax({
16              url:'app03/ajax/',
17              type:'POST',
18              data:{data:temp},
19              success:function(arg){
20                  var  obj=jQuery.parseJSON(arg);
21                  console.log(obj.status);
22                  console.log(obj.msg);
23                  console.log(obj.data);
24                  $('#name').val(obj.msg);
25              },
26              error:function(){
27                  console.log('failed')
28              }
29          });
30      }
31     </script>
32 </html>

views.py

 1 #coding:utf8
 2 from django.shortcuts import render,HttpResponse,render_to_response
 3 import json
 4 
 5 # Create your views here.
 6 def Ajax(request):
 7     if request.method=='POST':
 8         print request.POST
 9         data  = {'status':0,'msg':'請求成功','data':['11','22','33']}
10         return HttpResponse(json.dumps(data))
11         
12     else:
13         return render_to_response('app03/ajax.html')

列印數據樣式:

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自學單片機學到中斷部分,用數位管動態顯示刷新頻率高的時候會有重影,為了消除重影我查找了網上很多資料,好多錯的。 看看原理圖: 百度百科:74HC573 數位管 74HC573是擁有八路輸出的透明鎖存器,輸出為三態門,是一種高性能硅柵CMOS器件。 SL74HC573跟LS/AL573的管腳一樣。器件 ...
  • 選擇排序: 選擇排序(Selection sort)是一種簡單直觀的排序演算法。它的工作原理如下。首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然後,再從剩餘未排序元素中繼續尋找最小(大)元素,然後放到已排序序列的末尾。以此類推,直到所有元素均排序完畢。 選擇排序的主要優點與數據移動 ...
  • php中添加utf-8: 1 header("Content-type:text/html;charset='UTF-8'"); 文件操作步驟: 1.在同一目錄下建立一個file.txt的文件夾 2.打開文件 1 $res = fopen("file.txt","r");//打開文件路徑,打開後是個 ...
  • 有1、2、3、4個數字,能組成多少個互不相同且無重覆數字的三位數?都是多少? public class Example11 { public static void main(String[] args) { number(); } public static void number() { int ...
  • package util; import java.io.UnsupportedEncodingException;import java.security.InvalidKeyException;import java.security.NoSuchAlgorithmException;impor ...
  • 關於極光推送Jpush 推送是手機app必不可少的一樣功能,這次由於公司項目需要研究了一下。由於推送一般寫於服務端,所以對於不會Android的javaweb程式員要寫出一個完整的demo是一件很頭痛的事情。所以我就在這裡從頭到尾寫一個例子以示參考。由於我也不懂Android 只是由於項目需要百度了 ...
  • 常用的對數組進行的操作 1、求數組中最大值,最小值 思路:假設下標為0的元素是最大值,遍曆數組,依次跟max進行比較,如果有元素比這個max還大,則把這個值賦給max。最小值同樣 2、查找數組中是否存在某個元素 (2)、用二分查找法查找數組中是否存在某個元素 前提:待查找的數組必須是有序的(大小有序 ...
  • 1.如何學習程式設計? Java是一種平臺,也是一種程式設計語言,如何學好程式設計不僅僅適用於Java,對C++等其他程式設計語言也一樣管用。有編程高手認為,JAVA也好C也好沒什麼分別,拿來就用。為什麼他們能達到如此境界?我想是因為編程語言之間有共通之處,領會了編程的精髓,自然能夠做到一通百通。如 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...