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

Django从后台往前台传递数据时有多种方法可以实现,下面这篇文章主要给大家介绍了关于Django中数据在前后端传递的方式之表单、JSON与ajax的相关资料,需要的朋友可以参考下

前言

最近用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 文件里：双大括号扩住数据名

   数据读取：{{html_data_name}}

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

通过表单传给后端：在HTML里建一个表单，这是一种HTML内置的获取、提交数据的方法。表单里action=""意为把数据传给自己页面的url

    {% csrf_token %}

获取方法：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)

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

 {% csrf_token %}

# 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访问成功后将这里的数据变成ajax得到的数据

整体流程就是：点击按钮->触发了对应函数->ajax启动：此时ajax将data里的数据传给了url（教程里没传，但可以传）并访问、触发了url对应views里的视图（后端）、并且后端返回了数据被ajax放到了success:function()的参数里、运行了这个函数-> html内容被改变。

ajax的主要字段:

data: 传给后端的数据
url：传给哪个后端处理函数
success：得到数据后要这些数据干啥

Ajax+json：

   使用 jQuery AJAX 修改文本内容

后端：

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)