快捷導(dǎo)航

django學(xué)習(xí)之a(chǎn)jax post傳參的2種格式實(shí)例

更新時(shí)間：2021年05月14日 14:56:05 作者：金小金～

AJAX除了異步的特點(diǎn)外，還有一個(gè)就是：瀏覽器頁面局部刷新,下面這篇文章主要給大家介紹了關(guān)于django學(xué)習(xí)之a(chǎn)jax post傳參的2種格式的相關(guān)資料，需要的朋友可以參考下

一.ajax介紹

1、ajax的含義

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

2、使用ajax的好處:

使用ajax避免了整頁數(shù)據(jù)的刷新，也減少了請求等待的時(shí)間，提高了用戶體驗(yàn).

二.ajax傳參的兩種格式

假設(shè)有如下表單，需要將這些表單用ajax傳參的方式傳給后臺，該怎么做呢…

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

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

我們可以獲取用戶名，密碼等內(nèi)容，將其拼接成一個(gè)字典(想傳什么就將其拼接成字典格式，沒有特殊限制，你甚至可以單獨(dú)的只傳一個(gè)用戶名)，將其作為參數(shù)傳給后臺

例：

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

或

{‘username':username‘}

或

{‘password':password}

關(guān)于csrf是預(yù)防跨站攻擊的內(nèi)容，你可以移步djanjo之csrf防跨站攻擊作下了解

接下來看看代碼中是如何實(shí)現(xiàn)的，重點(diǎn)關(guān)注帶有下方標(biāo)記的代碼

{# 🌈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("地址",{參數(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ù)了，而是表單中所有的字段都會被納為請求的字符串格式

接下來看看代碼中是如何實(shí)現(xiàn)的，重點(diǎn)關(guān)注帶有下方標(biāo)記的代碼

<!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("地址",{參數(shù)},function(返回值){}) #}
         $.post("/user/register/",console.log($("form").serialize()),function(data){
            console.log(data)
        })

    });

</script>