前端知識筆記(三十七)———Django與Ajax

特點:

? ? ? ? 異步提交

? ? ? ? 局部刷新

例子:github注冊

動態獲取用戶名實時的跟后端確認并實時的展示到前端(局部刷新)?

朝后端發送請求的方式
? ? ? ? 1.瀏覽器地址欄直接輸入url回車 -----》get請求

? ? ? ? 2.a標簽的href屬性 ?-----》get請求

? ? ? ? 3.form表單 -----》get請求、post請求

? ? ? ? 4.ajax -----》 get請求、post請求

真正的ajax原生,需要使用js操作,jq的ajax方法是對原生js的封裝,方便咱們使用

(其他框架也可以,原理是一樣的)

前后端混合項目中,我們通常使用jq的ajax實現 js和后端異步交互
? ? ? ? jq操作dom
? ? ? ? jq發ajax請求
前后端分離項目中,我們會使用另一個第三方庫,實現 js和后端異步交互(axios)
?

寫一個例子:

頁面上有三個input框,前兩個框輸入數字,點擊提交,朝后端發送ajax請求,后端計算出結果再返回給前端,動態展示到第三個input框中,整個頁面不能刷新,也不能在前端計算

html代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<button id="btn">提交</button>
<script>// 先給按鈕一個點擊事件$('#btn').click(function (){// 朝后端發送ajax請求$.ajax({// 1.指定朝哪個后端發送ajax請求url:'', // 不寫就是朝當前地址提交// 2.請求方式type:'post', // 不指定就是get,都是小寫// 3.數據data:{'l1':$('#d1').val(),'l2':$('#d2').val()},// 4.回調函數:當后端給你返回結果的時候會自動觸發 args接收后端返回的結果success:function (args) {$('#d3').val(args)}})})
</script>
</body>
</html>

views代碼

from django.shortcuts import render,HttpResponsedef ab_ajax(request):if request.method=='POST':l1 = request.POST.get('l1')l2 = request.POST.get('l2')#先轉成整型再加l3=int(l1)+int(l2)return HttpResponse(l3)return render(request,'ajax.html')

前后端傳輸數據的編碼格式(contentType)
因為get請求數據就是直接放在url后面的(url?user=kk$pwd=123),所以主要看下post請求的編碼格式

向后端發送post請求的方式
? ? ? ? 1.form表單

? ? ? ? 2.ajax請求

前后端傳輸數據的編碼格式

? ? ? ? urlencoded

? ? ? ? formdata

? ? ? ? json

? ? ? ? form表單

默認的編碼格式是urlencoded

數據格式:user=kk&pwd=123 ? ? ? ?

Django后端針對符合urlencoded編碼格式的數據會自動幫你解析封裝到request.POST中?

user=kk&pwd=123 ? ? --------》 ? request.POST

如果把編碼格式改成formdata,那么針對普通的鍵值對還是解析到request.POST中, 而將文件解析到request.FILES中

form表單是沒辦法發送json格式數據的?

ajax默認的編碼格式是urlencoded

ajax發送json格式數據
html代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="d1">點我</button>
<script>$('#d1').click(function () {$.ajax({url:'',type:'post',data:JSON.stringify({'username':'kk','age':12}),contentType:'application/json',  //指定編碼格式success:function () {}})})
</script>
</body>
</html>

views代碼

import jsonfrom django.shortcuts import renderdef login(request):return render(request,'login.html')def ab_json(request):#針對json格式的數據需要自己手動處理if request.is_ajax(): #判斷是不是ajax的請求json_bytes=request.body #拿到一個字符串類型json_dict=json.loads(json_bytes)  #傳入的二進制的數據會內部自動解碼再反序列化print(json_dict)return render(request,'ab_json.html')

ajax發送json格式數據需要注意點

? ? ? ? 1.contentType參數指定成:applicaton/json

? ? ? ? 2.數據是真正的json格式數據

? ? ? ? 3.Django后端不會幫你處理json格式數據,需要你自己去request.body獲取并處理

ajax發送文件

1.? ajax發送文件需要借助于js內置對象FormData

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>username<input type="text" id="d1"></p>
<p>password<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button id="d4">點我</button>
<script>//點擊按鈕朝后端發送普通鍵值對和文件數據$('#d4').on('click',function () {//需要先利用FormData內置對象let formDataObj=new FormData();//2 添加普通的鍵值對formDataObj.append('username',$('#d1').val());formDataObj.append('password',$('#d2').val());//3添加文件對象formDataObj.append('myfile',$('#d3')[0].file[0]);//4將對象基于發送給后端$.ajax({url:'',type:'post',data:formDataObj, //直接將對象放在data后面即可//ajax發送文件必須指定兩個參數contentType:false, //不需使用任何編碼,Django后端都能自動識別formdata對象processData: false, //告訴你的瀏覽器不要對你的數據進行任何處理success:function () {}})})
</script>
</body>
</html>

2. ?ajax發送文件必須指定兩個參數:
? ? ? ? ? ? contentType:false, ?//不需使用任何編碼,Django后端都能自動識別formdata對象
? ? ? ? ? ? processData: false, ?//告訴你的瀏覽器不要對你的數據進行任何處理
3. ?Django后端能夠直接識別formdata對象并且能夠將內部的普通鍵值自動解析并封裝到request.POST中,文件數據自動解析并封裝到request.FILES中

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/208497.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/208497.shtml
英文地址,請注明出處:http://en.pswp.cn/news/208497.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

pcl-3 pcl結合opencv做svm分類(法向量特征數據)

后續使用了fpfh特征作為訓練數據&#xff0c;遇到了一些困難 首先是flann沖突&#xff0c;這個將opcv中的flann都改成了flann2就可以運行 后面在將得到的33特征值進行訓練的時候一直內存超限&#xff0c;傳輸的不太好&#xff0c;到現在還是不行&#xff0c;改了三天還是沒有改…

Flink 系列文章匯總索引

Flink 系列文章 一、Flink 專欄 本專欄系統介紹某一知識點&#xff0c;并輔以具體的示例進行說明。 本專欄的文章編號可能不是順序的&#xff0c;主要是因為寫的時候順序沒統一&#xff0c;但相關的文章又引入了&#xff0c;所以后面就沒有調整了&#xff0c;按照寫文章的順…

OpenCL學習筆記(三)手動編譯開發庫(win10+mingw64)

前言 有的小伙伴仍然在使用mingw編譯器&#xff0c;這時只能重新編譯opencl的sdk庫。本文檔簡單記錄下win10下&#xff0c;使用mingw11.20編譯的過程&#xff0c;有需要的小伙伴可以參考下 一、安裝所需軟件 1.安裝git&#xff0c;教程比較多&#xff0c;不再重復 2.安裝cm…

chrome安裝jsonview

寫在前面 通過jsonview可以實現&#xff0c;當http響應時application/json時直接在瀏覽器格式化顯示&#xff0c;增加可讀性。本文看下如何安裝該插件到chrome中。 1&#xff1a;安裝 首先在這里 下載插件包&#xff0c;然后解壓備用。接著在chrome按照如下步驟操作&#xf…

千鋒 Vue 詳細筆記整理

視頻筆記是根據B站 千鋒 濤哥 - SpringBootvue前后端分離項目《鋒迷商城》實戰課-完結版 進行整理的 筆記可上 gitee倉庫 自取 千鋒 Vue 筆記整理 一、vue 的簡介1.1 使用 JQuery 的復雜性問題1.2 VUE 簡介1.2.1 前端框架1.2.2 MVVM 二、 vue 入門使用2.1 vue 的引入2.2 入門案…

WPF(Windows Presentation Foundation)的 StatusBar控件

WPF&#xff08;Windows Presentation Foundation&#xff09;的 StatusBar 是一種用于顯示狀態欄的控件。狀態欄是用于向用戶提供應用程序的狀態信息或其他相關信息的區域。它通常位于應用程序窗口的底部&#xff0c;并提供一些常見的功能&#xff0c;如顯示進度、狀態文本、通…

[C#] 基于 yield 語句的迭代器邏輯懶執行

眾所周知, C# 可以通過 yield 語句來快速向 IEnumerator 或者 IEnumerable 類型的方法返回值返回一個元素. 但它還有另外一個特性, 就是其內部邏輯的懶執行. 每兩個 yield 語句之間的邏輯都是一個狀態, 只有在調用迭代器的 MoveNext 方法后, 才會執行下一個狀態的邏輯. 在文章中…

澤攸科技二維材料轉移臺的應用場景及優勢

隨著二維材料的廣泛研究和各種潛在應用的開發&#xff0c;對于二維材料樣品的精密操控與轉移的需求日益增加。特別是一些新型二維材料的制備和器件集成制備中&#xff0c;需要在顯微鏡下對樣品進行觀察與定位&#xff0c;并能夠在微米甚至納米量級上精確移動和轉移樣品。 傳統…

集簡云 x 零售企業丨快速集成有贊商城和微盛企微管家,實現私域運營自動化

客戶介紹 某公司是一家知名的飲料廠商&#xff0c;自1998年成立以來&#xff0c;一直致力于研發和生產各種熱門飲品&#xff0c;如果汁、碳酸飲料、礦泉水等。因其獨特的口感和健康的品質深受消費者的喜愛。企業擁有多個知名品牌&#xff0c;享有極高的品牌知名度和市場份額。該…

BGP綜合

1、使用PreVal策略&#xff0c;確保R4通過R2到達192.168.10.0/24。 2、使用AS_Path策略&#xff0c;確保R4迪過R3到達192.168.11.0/24。 3、配置MED策略&#xff0c;確保R4通過R3到達192.168.12.0/24。 4、使用Local Preference策略&#xff0c;確保R1通過R2到達192.168.1.0…

Mac電腦系統管理:iStat Menus中文 for Mac

iStat Menus是一款強大而靈活的系統監控工具&#xff0c;可以幫助Mac用戶實時監控和管理自己的電腦。它提供了豐富的系統狀態和性能指標&#xff0c;可自定義的菜單欄圖標以及歷史數據記錄功能&#xff0c;讓用戶能夠全面了解和掌握電腦的運行情況。 實時系統監控&#xff1a;i…

Django的Auth模塊

Auth模塊 我們在創建好一個Django項目后執行數據庫遷移命令會自動生成很多表 其中有auth_user等表 Django在啟動之后就可以直接訪問admin路由&#xff0c;需要輸入用戶名和密碼&#xff0c;數據參考的就是auth_user表&#xff0c;并且必須是管理員才能進入 依賴于a…

flink1.12.4消費kafka 報錯 The coordinator is not available

報錯 You should retry committing the latest consumed offsets. Caused by: org.apache.kafka.common.errors.CoordinatorNotAvailableException: The coordinator is not available. 但是任務還在正常跑. 開源bug [FLINK-28060] Kafka Commit on checkpointing fails rep…

12.8 作業 C++

使用手動連接&#xff0c;將登錄框中的取消按鈕使用qt4版本的連接到自定義的槽函數中&#xff0c;在自定義的槽函數中調用關閉函數 將登錄按鈕使用qt5版本的連接到自定義的槽函數中&#xff0c;在槽函數中判斷ui界面上輸入的賬號是否為"admin"&#xff0c;密碼是否為…

一篇文章熟練掌握 Axios

Axios是什么 Axios是一個基于Promise的網絡請求庫&#xff0c;作用于node.js和瀏覽器中。在服務端使用原生node.js http模塊&#xff0c;在客戶端使用XMLHttpRequest。是基于Promise對Ajax的封裝。 Axios的特性 從瀏覽器創建XMLHttpRequests從node.js創建http請求支持Promis…

基于OpenCV的人臉識別系統案例

基于OpenCV的人臉識別系統案例 人臉識別簡介代碼實現案例應用情況 下面將介紹如何使用Python和OpenCV庫構建一個簡單但強大的人臉識別系統。人臉識別是計算機視覺領域的一個重要應用&#xff0c;具有廣泛的實際用途&#xff0c;從安全門禁到娛樂應用。 人臉識別簡介 人臉識別是…

MySQL - 表達式With as 語句的使用及練習

目錄 8.1 WITH AS 的含義 8.2 WITH AS語法的基本結構如下&#xff1a; 8.3 練習題1 8.4 牛客練習題 8.1 WITH AS 的含義 WITH AS 語法是MySQL中的一種臨時結果集&#xff0c;它可以在SELECT、INSERT、UPDATE或DELETE語句中使用。通過使用WITH AS語句&#xff0c;可以將一個查…

量子芯片技術:未來的計算革命

量子芯片技術&#xff1a;未來的計算革命 一、引言 隨著科技的不斷發展&#xff0c;人類正在進入一個全新的技術時代&#xff0c;即量子時代。量子芯片技術作為這個時代的重要代表&#xff0c;正逐漸改變我們對計算和信息處理的理解。本文將深入探討量子芯片技術的基本原理、…

Navicat 技術指引 | 適用于 GaussDB 分布式的服務器對象的創建/設計

Navicat Premium&#xff08;16.3.3 Windows版或以上&#xff09;正式支持 GaussDB 分布式數據庫。GaussDB分布式模式更適合對系統可用性和數據處理能力要求較高的場景。Navicat 工具不僅提供可視化數據查看和編輯功能&#xff0c;還提供強大的高階功能&#xff08;如模型、結構…

Java入門 EditPlus的安裝與配置講解

寫Java程序不建議使用EditPlus&#xff0c;首選idea社區版&#xff0c;其次是vscode&#xff0c; 然后是eclipse 。editplus說實話排不上號。 但既然小伙伴想了解一下怎么配置&#xff0c;這里就簡單說一下。 下載 首先是jdk&#xff0c;jdk是Java開發和運行的基礎&#xff…