Django中Ajax POST传参的两种实现方式

Luna

发布时间：2026-10-14| 4人浏览过

原创

本文介绍Django中使用Ajax进行POST请求的两种传参格式。第一种方法通过手动拼接字典，灵活选择提交部分或全部表单字段；第二种方法利用jQuery的serialize()函数将表单所有字段序列化为GET风格的字符串。文章包含HTML模板与JavaScript代码示例，并涉及CSRF令牌的处理。

一、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>