Django 中数据在前后端传递的方式：表单、JSON、ajax

最近用Django写项目的时候用到了数据的传递，一窍不通，查了点资料。记录一下。水平不高，瓜不保熟。

天行健·

10469人浏览 · 2021-12-17 14:32:37

天行健· · 2021-12-17 14:32:37 发布

最近用Django写项目的时候用到了数据的传递，一窍不通，查了点资料。记录一下。水平不高，瓜不保熟。

从两方面来说：从后端传递给前端页面、以及从前端页面的输入数据传给后端

先说简单的：

从后端到页面、也就是view文件到传递给HTML展示出来

以Django框架为例，views里有个函数叫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 文件里：双大括号扩住数据名
```

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

从页面到后端、也就是HTML文件到views文件

通过表单传给后端：在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里一个字典的变量，你把它传到HTML的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>

同样的也能从HTML发送给后端，只是需要放到表单里提交：

<!--/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", {})

这里涉及到俩概念：

「解析」：将JSON格式的字符串转化成JSON对象（JS对象值）的过程。也称为「反序列化」。

「序列化」：就是说把原来是对象的类型转换成字符串类型（或者更确切的说是JSON字符串类型的）。

解析：将字符串变成了Obj带有的属性就是字符串里显示的。可以用点号取出。

var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; 

var jsondata = $.parseJSON(data);//jQuery
var jsondata  = JSON.parse(data);//原生

序列化

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

ajax

ajax的使用方式:这是ajax教程里的一段: 点进去尝试一下。w3chool

我当时没看懂，所以在这解释一下里面的语句都是干嘛的：

<!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>

整体流程就是：点击按钮->触发了对应函数->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)

参考：前、后端是如何进行数据交互的？