Django前后端数据交互：表单、JSON与Ajax详解

沿途有光

发布时间：2026-10-16| 5人浏览过

原创

本文详细解析Django框架中前后端数据传递的三种核心方式：传统表单提交、JSON数据交互以及Ajax异步传输。文章从后端向前端渲染数据的基础用法入手，深入探讨利用request.POST获取表单数据的方法，并重点剖析Ajax结合JSON实现无刷新数据交互的原理与代码实现，涵盖序列化、反序列化及CSRF处理等关键细节，帮助开发者掌握高效的数据传输方案。

前言

近期在Django项目开发中涉及数据传递环节，因对具体实现细节不够熟悉，查阅相关资料后整理此笔记。本文旨在记录相关知识点，内容可能不够完善，仅供参考。

数据传递主要涵盖两个方向：一是后端向前端页面传输数据，二是前端页面接收用户输入后回传至后端。

首先介绍较为简单的单向传递方式：

1、后端至前端：即View视图函数向HTML模板传递数据并展示。

以Django框架为例，在views.py中定义一个名为test_view的视图函数，该函数负责向后端发送数据，并通过test_view.html模板将内容渲染给浏览器用户。

# /views
def test_view(request):
    python_data = "python里的数据"
    return render(request, "test_view.html", {"html_data_name":python_data})

render函数的第三个参数用于传入需要传递给前端的数据字典。

在前端HTML文件中，使用双大括号{{ }}包裹变量名即可获取并显示后端传递的数据。

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p>数据读取：{{html_data_name}}</p>
</body>
</html>

2、前端至后端：即HTML表单数据提交至View视图函数。

通过HTML表单向后端提交数据是获取和提交信息的内置方法。在HTML表单标签中，action=""属性用于指定数据提交的目标URL，若留空则提交给当前页面。

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<form  method="post" action="">
        {% csrf_token %}
        <input type="text" name="html_data_to_views_name" value="Mickey">
        <input type="submit" value="Submit">
    </form> 
</body>
</html>

在后端获取数据的方法为：request.POST.get('变量名')。

# /views
def test_view(request):
    if request.method == 'POST':
        data_from_html = request.POST.get('html_data_to_views_name')
        HttpResponse(f'views得到表单数据{data_from_html}')
    python_data = "python里的数据"
    return render(request, "test_view.html", {"html_data_name":python_data})

上述代码示例中增加了条件判断，检查request.method是否等于POST。当用户提交表单时，会重新调用test_view视图函数，此时request对象中包含表单数据，且请求方法为post。

满足判断条件后，通过request.POST.get方法从request对象中提取出提交的数据。

上述两种传统方式每次数据传递都会导致页面刷新，不适合大量数据交互或需要实时更新画面的场景（如动态图表、实时反馈等）。

接下来介绍更复杂的Ajax与JSON交互方式。

可以简单理解为：

Ajax是一种无需刷新页面即可传输数据的技术，且支持双向通信：既可以从前端传至后端，也可以从后端传至前端。每次触发即可执行一次数据传输。
JSON是一种轻量级数据交换格式。在Python中，字典变量可以直接转换为JSON格式传输至前端JavaScript中，前端仍可按字典方式访问，便于数据传输和处理。

JSON处理

在Django中，后端向前端传输JSON数据主要有两种方式：一是使用Python标准库json模块，二是使用Django内置的JsonResponse对象。

# views.py 发送
 def test_view(request):
     data={
         'html_data_name': 'python_data',
     }
    # return HttpResponse(json.dumps(data)) # 会被识别为text/html应该是：
    return HttpResponse(json.dumps(data), content_type='application/json')
    # 或return JsonResponse(data)

<!--/test_view.html 读取-->
<script>
var jsondata  = JSON.parse(data);//原生
</script>

同样，前端也可以向后端发送JSON数据，但需将其放入表单中提交。

<!--/test_view.html -->
 
<!--假设你有一个JSON数据要先把他转为字符串 -->
<script>
JSONdata={'key':'value'}
json_str_data = JSON.stringify(JSONdata).toString();
function get_json_str(){
    var inp_id =document.getElementById("str_json_data");
    inp_id.value = json_str_data
}
</script>
 
<!--将字符串放到一个隐藏的表单input里，提交后就传走了 -->
<form method="post" action="">
    {% csrf_token %}
    <input type="text" id="str_json_data" style="display:none" name="str_json_data">
    <button type="submmit" onclik="get_json_str()">提交</button>
</form>

# views.py 读取
    # /views
    def test_view(request):
        if request.method == 'POST':
            json_data = json.loads(request.body) //json读取方式
            return HttpResponse("get!")
        return render(request, "test_view.html", {})

这里涉及两个核心概念：

「解析」（Parsing）：将JSON格式的字符串转换为JSON对象（即JavaScript对象）的过程，也称为「反序列化」。

「序列化」（Serialization）：将对象类型转换为字符串类型（确切地说是JSON字符串格式）的过程。

解析示例：将字符串转换为对象后，可通过点号访问字符串中显示的属性。

var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; 
 
var jsondata = $.parseJSON(data);//jQuery
var jsondata  = JSON.parse(data);//原生

序列化示例：将对象转换为JSON字符串。

var jsonstrdata = JSON.stringify(data).toString();

Ajax技术

Ajax的使用方式如下：

若对代码逻辑感到困惑，以下是对各语句功能的解释：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
    data:{"data_send":"你想发给url的数据"} //教程里没给url发数据
    url:"访问这个url后，对应views发过来的数据就是下面的data_get",
    success:function(data_get){
      $("#div1").html(data_get); //用得到的数据替换掉id="div1"的div里的那句话
    }});
  });
});
</script>
</head>
<body>
 
<div id="div1"><h2>在ajax访问成功后将这里的数据变成ajax得到的数据</h2></div>
<button>使用ajax</button>
 
</body>
</html>

整体流程为：点击按钮 -> 触发对应JavaScript函数 -> Ajax启动：此时Ajax将data中的数据发送至指定url（教程中未明确指定url，但支持传递）并访问，触发对应views视图（后端），后端返回数据，Ajax将返回数据放入success:function()回调函数的参数中，执行该函数 -> 更新HTML内容。

Ajax主要配置字段：

data：发送给后端的数据内容。
url：指定处理数据的后端处理函数地址。
success：数据获取成功后执行的操作。

Ajax结合JSON的完整示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function(){
  $("button").click(function(){
    var token_csrf = "{{ csrf_token }}";  //因为django的form表单中都包含csrf_token，因此在用ajax传表单数据时也要带上
    var JSON_data = { "js_data": 555 };  
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        headers: { "X-CSRFToken": token_csrf },
        url: "/testview",
        dataType: "json",
        data: JSON.stringify(JSON_data), //传进views里的数据
        success: function (data) { //data为地址传过来的数据
            //在此对data进行操作
            }
        };
    });
  });
});
 
</script>
</head>
<body>
 
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>
 
</body>
</html>

后端处理代码：

def post(self, request):
    data = json.loads(request.body)
 
    get_data = data["js_data"]
 
    data={
        'send_data':'send_data',
    }
    return HttpResponse(json.dumps(data),content_type="application/json")
    # 或者直接使用JsonResponse函数
    # return JsonResponse(data)