博客摘录「 Django 中数据在前后端传递的方式：表单、JSON、ajax」2024年5月5日

最新推荐文章于 2024-07-09 14:10:01 发布

一定能学会的

最新推荐文章于 2024-07-09 14:10:01 发布

阅读量506

点赞数 16

文章标签：笔记

本文链接：https://blog.csdn.net/m0_74077511/article/details/138467671

版权

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

ajax使用：

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

<!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为地址传过来的数据
$("#div1").html(data); //用得到的数据替换掉id="div1"的div里的那句话，在此对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)