当前位置:   article > 正文

python前后台数据交互_Django-前后台的数据交互

python前后端如何交互

Django 从后台往前台传递数据时有多种方法可以实现。

最简单的后台是这样的:

from django.shortcuts importrenderdefmain_page(request):return render(request, 'index.html')

这个就是返回index.html的内容,但是如果要带一些数据一起传给前台的话,该怎么办呢?

view >> HTML

这里是这样:后台传递一些数据给html,直接渲染在网页上,不会有什么复杂的数据处理(如果前台要处理数据,那么就传数据给JS处理)

Django 代码:

from django.shortcuts importrenderdefmain_page(request):

data= [1,2,3,4]return render(request, 'index.html', {'data': data})

html使用 {{ }} 来获取数据

{{ data }}

可以对可迭代的数据进行迭代:

{% for item in data%}

{{ item }}

{% endfor %}

该方法可以传递各种数据类型,包括list,dict等等。

而且除了 {% for %} 以外还可以进行if判断,大小比较等等。具体的用法读者可以自行搜索。

view >> JavaScript

如果数据不传给html用,要传给js用,那么按照上文的方式写会有错误。

需要注意两点:

views.py中返回的函数中的值要用 json.dumps() 处理

在网页上要加一个 safe 过滤器。

代码:

views.py

#-*- coding: utf-8 -*-

importjsonfrom django.shortcuts importrenderdefmain_page(request):

list= ['view', 'Json', 'JS']return render(request, 'index.html', {'List': json.dumps(list),

})

JavaScript部分:

var List = {{ List|safe }};

JavaScript Ajax 动态刷新页面

步骤1:后台数据通过 JSON 序列化成字符串

注意:1、json是1个字符串

2、通过json.dumps('xxx') 序列化成 1个字符串的 '字典对象'

views.py

defajax(request):if request.method=='POST':print(request.POST)

data={'status':0,'msg':'请求成功','data':[11,22,33,44]}returnHttpResponse(json.dumps(data))else:return render(request,'ajax.html')

此时tempates 中ajax.html 代码

此时浏览器返回的数据

步骤2:前台取出后台序列化的字符串

方法1:正则表达式 (不推荐)

方法2:jQuery.parseJSON() ,需要import json

转换成1个JQuery可识别的字典(对象)   通过 对象. xxx 取值  (推荐)

views.py序列化:return HttpResponse(json.dumps(data))

ajax.html 取值:var obj=jQuery.parseJSON(arg)

console.log(obj.status)

修改后的tempates 中ajax.html 代码

functionDoAjax(){var temp=$('#na').val()

$.ajax({

url:'/ajax/', //url相当于 form 中的 action

type:'POST', //type相当于form 中的 method

data:{dat:temp}, //data:传人的数据 dat为任意设置的内容,相当于模版中的{author:lee}

dataType:'json',

success:function(arg){ //成功执行 console.log() 函数 arg 为HttpResponse 返回的值

var obj=jQuery.parseJSON(arg) //转化成JS识别的对象

console.log(obj) //打印obj

console.log(arg) //json.dumps(data) 序列化后的数据

console.log(obj.status) //取json.dumps(data)字典的值status

console.log(obj.msg)

console.log(obj.data)

console.log('request.POST 提交成功')

},

error:function(){ //失败

console.log('失败')

}

});

}

此时前台浏览器 显示数据

方法3:content_type='application/json'

views.py 序列化:return HttpResponse(json.dumps(data),content_type='application/json')

浏览器F12有变色提示

或:HttpResponse(json.dumps(data),content_type='type/json')   浏览器F12无变色提示

ajax.html 取值 arg.xxx

方法4:使用JsonRespon 包 (最简单)  前台通过 arg.xxx 取值

views.py 序列化: return JsonResponse(data)

ajax.html 取值:arg.xxx

区别:HttpResponse 需要dumps

JsonResponse 不需要dumps

views.py

from django.shortcuts importrenderfrom django.http importJsonResponsedefajax(request):if request.method=='POST':print(request.POST)

data={'status':0,'msg':'请求成功','data':[11,22,33,44]} #假如传人的数据为一字典

#return HttpResponse(json.dumps(data)) #原来写法,需要dumps

return JsonResponse(data) #后来写法

else:return render(request,'ajax.html')

templates 中的 ajax.html

functionDoAjax(){var temp=$('#na').val()

$.ajax({

url:'/ajax/', //url相当于 form 中的 action

type:'POST', //type相当于form 中的 method

data:{dat:temp}, //data:传人的数据 dat为任意设置的内容,相当于模版中的{author:lee}

dataType:'json',

success:function(arg){ //成功执行 console.log() 函数 arg 为HttpResponse 返回的值

var obj=jQuery.parseJSON(arg) //转化成JS识别的对象

console.log(obj) //打印obj

console.log(arg) //json.dumps(data) 序列化后的数据

console.log(obj.status) //取json.dumps(data)字典的值status

console.log(obj.msg)

console.log(obj.data)

console.log('request.POST 提交成功')

},

error:function(){ //失败

console.log('失败')

}

});

}

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/507723
推荐阅读
相关标签
  

闽ICP备14008679号