django學習之ajax post傳參的2種格式實例

Posted on by

一.ajax介紹

1、ajax的含義

Ajax全稱“Async Javascript And XML”即：異步的javascript和XML。它是一種稱謂，並不指代某項具體的技術，準確來說是一系列技術的集合.現在，所有的無刷新操作都被稱為“Ajax”.

2、使用ajax的好處:

使用ajax避免瞭整頁數據的刷新，也減少瞭請求等待的時間，提高瞭用戶體驗.

二.ajax傳參的兩種格式

假設有如下表單，需要將這些表單用ajax傳參的方式傳給後臺，該怎麼做呢…

我們知道ajax傳參的格式為$.post(“地址”,參數,function(返回值){})，套用這個格式進行傳參，有以下兩種方法：

方法一：提交表單中的部分字段

我們可以獲取用戶名，密碼等內容，將其拼接成一個字典(想傳什麼就將其拼接成字典格式，沒有特殊限制，你甚至可以單獨的隻傳一個用戶名)，將其作為參數傳給後臺

例：

{‘username’:username,‘password’:password,‘csrfmiddlewaretoken’:csrf}

或

{‘username’:username‘}

或

{‘password’:password}

關於csrf是預防跨站攻擊的內容，你可以移步djanjo之csrf防跨站攻擊作下瞭解

接下來看看代碼中是如何實現的，重點關註帶有下方標記的代碼

{# 🌈ajax #}

{# 🌈post提交 #}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊</title>
    {# 引用jquery #}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/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://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/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傳參的文章就介紹到這瞭,更多相關django之ajax post傳參內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：