Python编程
搜索
分类

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

作者：天行健· 时间：2022-08-09 11:32:44　

前言

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

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

先说简单的：

1、从后端到页面、也就是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 文件里：双大括号扩住数据名

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

2、从页面到后端、也就是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的使用方式:

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

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

来源：https://blog.csdn.net/weixin_44144510/article/details/121995683

标签：django,前后端,传递
0
投稿

猜你喜欢

  • Python OpenCV形态学运算示例详解

    2022-03-04 12:23:39

  • 详解多线程Django程序耗尽数据库连接的问题

    2024-01-23 02:27:14

  • Go实现双向链表的示例代码

    2024-03-13 04:11:45

  • python实现简单颜色识别程序

    2022-07-15 09:34:47

  • 详解MySQL中的死锁情况以及对死锁的处理方法

    2024-01-20 05:33:33

  • python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍

    2022-04-18 06:08:49

  • pytorch 利用lstm做mnist手写数字识别分类的实例

    2023-01-31 03:15:38

  • GO语言包管理工具go mod以及包详解

    2024-05-09 14:55:23

  • sqlserver 中时间为空的处理小结

    2011-11-03 17:16:17

  • 基于python进行桶排序与基数排序的总结

    2023-06-13 17:32:33

  • MySQL如何为表和字段取别名详解

    2024-01-14 11:35:02

  • d3.js入门教程之数据绑定详解

    2024-04-22 12:48:54

  • pandas 层次化索引的实现方法

    2023-11-24 19:04:02

  • 用python做游戏的细节详解

    2022-02-08 05:18:39

  • 解决Pycharm中import时无法识别自己写的程序方法

    2023-05-09 22:47:37

  • 利用jupyter网页版本进行python函数查询方式

    2022-05-23 17:27:12

  • 微信小程序canvas写字板效果及实例

    2024-04-19 09:44:03

  • Python matplotlib绘图建立画布及坐标系

    2021-03-28 02:56:07

  • 对dataframe进行列相加,行相加的实例

    2023-07-24 16:57:59

  • js运算精度丢失的2个解决方法

    2024-04-10 10:38:02
    • asp之家 网络编程 m.aspxhome.com