本文小編為大家詳細介紹“django怎么使用ajax進行post傳參”,內容詳細,步驟清晰,細節處理妥當,希望這篇“django怎么使用ajax進行post傳參”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
1、ajax的含義
Ajax全稱“Async Javascript And XML”即:異步的javascript和XML。它是一種稱謂,并不指代某項具體的技術,準確來說是一系列技術的集合.現在,所有的無刷新操作都被稱為“Ajax”.
2、使用ajax的好處:
使用ajax避免了整頁數據的刷新,也減少了請求等待的時間,提高了用戶體驗.
假設有如下表單,需要將這些表單用ajax傳參的方式傳給后臺,該怎么做呢…
我們知道ajax傳參的格式為$.post(“地址”,參數,function(返回值){})
,套用這個格式進行傳參,有以下兩種方法:
方法一:提交表單中的部分字段
我們可以獲取用戶名,密碼等內容,將其拼接成一個字典(想傳什么就將其拼接成字典格式,沒有特殊限制,你甚至可以單獨的只傳一個用戶名),將其作為參數傳給后臺
例:
{'username':username,
'password':password,
'csrfmiddlewaretoken':csrf
}
或
{'username':username‘}
或
{'password':password}
接下來看看代碼中是如何實現的,重點關注帶有下方標記的代碼
{# ????ajax #}
{# ????post提交 #}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注冊</title> {# 引用jquery #} <script src="https://atts.yisu.com/attachments/jquery.min.js"></script> </head> <body> <form ation="" method="post"> {# 防止跨站攻擊 #} {% csrf_token %} 用戶名:<input type="text" name="username"><br> 密碼:<input type="text" name="password"><br> <!-- {# 表單提交 #}--> <!-- <input type="submit">--> <!-- {# ajax提交 #}--> <input type="button" value="注冊" id="button"> </form> </body> </html> <script> {# ????ajax #} $("#button").click(function(){ username = $("[name='username']").val(); password = $("[name='password']").val(); csrf = $("[type='hidden']").val(); console.log(username,password,csrf); {# ????post提交 #} {# $.post("地址",{參數},function(返回值){}) #} $.post("/user/register/",{'username':username,'password':password,'csrfmiddlewaretoken':csrf},function(data){ console.log(data) }) }); </script>
方法二:提交表單中的所有字段
console.log($(“form”).serialize()
serialize是把表單中的字段序列化,弄成get的請求的字符串格式,將其作為參數傳給后臺
值得注意的是這里就不能像方法一里那樣想傳什么參數就傳什么參數了,而是表單中所有的字段都會被納為請求的字符串格式
接下來看看代碼中是如何實現的,重點關注帶有下方標記的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注冊</title> {# 引用jquery #} <script src="https://atts.yisu.com/attachments/jquery.min.js"></script> </head> <body> <form ation="" method="post"> {# 防止跨站攻擊 #} {% csrf_token %} 用戶名:<input type="text" name="username"><br> 密碼:<input type="text" name="password"><br> <!-- {# 表單提交 #}--> <!-- <input type="submit">--> <!-- {# ajax提交 #}--> <input type="button" value="注冊" id="button"> </form> </body> </html> <script> {# ????ajax #} $("#button").click(function(){ console.log($("form").serialize()); {# ????post提交 #} {# $.post("地址",{參數},function(返回值){}) #} $.post("/user/register/",console.log($("form").serialize()),function(data){ console.log(data) }) }); </script>
讀到這里,這篇“django怎么使用ajax進行post傳參”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。