免費AI編程助手
在現(xiàn)在前后端分離的開發(fā)環(huán)境下，python開發(fā)一個web一般使用Django，然后Django配合ajax交互實現(xiàn)前端信息的傳遞。那么Django怎么使用jajx進行post傳參呢？接下來這篇文章帶你了解。
一.ajax介紹
1、ajax的含義
Ajax全稱“Async Javascript And XML”即：異步的javascript和XML。它是一種稱謂，并不指代某項具體的技術(shù)，準確來說是一系列技術(shù)的集合.現(xiàn)在，所有的無刷新操作都被稱為“Ajax”.
2、使用ajax的好處:
使用ajax避免了整頁數(shù)據(jù)的刷新，也減少了請求等待的時間，提高了用戶體驗.
二.ajax傳參的兩種格式
假設(shè)有如下表單，需要將這些表單用ajax傳參的方式傳給后臺，該怎么做呢…
我們知道ajax傳參的格式為?$.post(“地址”,參數(shù),function(返回值){})?，套用這個格式進行傳參，有以下兩種方法：
方法一：提交表單中的部分字段
我們可以獲取用戶名，密碼等內(nèi)容，將其拼接成一個字典(想傳什么就將其拼接成字典格式，沒有特殊限制，你甚至可以單獨的只傳一個用戶名)，將其作為參數(shù)傳給后臺
例：
{'username':username,
'password':password,
'csrfmiddlewaretoken':csrf
}
或
{'username':username‘}或
{'password':password}接下來看看代碼中是如何實現(xiàn)的，重點關(guān)注帶有下方標記的代碼
{# ??ajax #}
{# ??post提交 #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊</title>
{# 引用jquery #}
<script src="https://atts.w3cschool.cn/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("地址",{參數(shù)},function(返回值){}) #}
$.post("/user/register/",{'username':username,'password':password,'csrfmiddlewaretoken':csrf},function(data){
console.log(data)
})
});
</script>
方法二：提交表單中的所有字段
console.log($(“form”).serialize()
serialize是把表單中的字段序列化，弄成get的請求的字符串格式，將其作為參數(shù)傳給后臺
值得注意的是這里就不能像方法一里那樣想傳什么參數(shù)就傳什么參數(shù)了，而是表單中所有的字段都會被納為請求的字符串格式
接下來看看代碼中是如何實現(xiàn)的，重點關(guān)注帶有下方標記的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊</title>
{# 引用jquery #}
<script src="https://atts.w3cschool.cn/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("地址",{參數(shù)},function(返回值){}) #}
$.post("/user/register/",console.log($("form").serialize()),function(data){
console.log(data)
})
});
</script>
總結(jié)
到此這篇django使用ajax進行post傳參的文章就介紹到這了,更多django后端開發(fā)和前端交互的學習內(nèi)容可以關(guān)注W3Cschool相關(guān)文章！
