位置：首页>> 网络编程>> Python编程>> Django中数据在前后端传递的方式之表单、JSON与ajax

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

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

标签：django,前后端,传递

前言

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

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

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

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

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

<script>
var jsondata = JSON.parse(data);//原生
</script>

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

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


<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中数据在前后端传递的方式之表单、JSON与ajax

前言

先说简单的：

复杂一点的 Ajax 与 JSON

猜你喜欢