Django(Python)前后端交互

时间:2022-06-20
本文章向大家介绍Django(Python)前后端交互,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  1. 使用Django中自带的模板
    1. 前端通过form 表单向后端提交数据
# /template/demo/demo.html
{% if result == 1 %}
    <p> 插入成功 </p>
{% else if result==2 %}
    <p>插入失败</p>
{% endif %}
<form class="layui-form" method="post" action="{% url 'demo:type_add' %}" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="type_name" required autocomplete="off" class="layui-input">
    <input type="text" name="type_sort" required autocomplete="off" class="layui-input">
    <input type="submit" value="提交">       
</form>     
# /demo/url.py
app_name = '[demo]'
urlpatterns = [
    url(r'^type_add/', views.type_add, name='type_add'),
]
# /demo/views.py
def type_add(request):
    # 类型名称
    type_name = request.POST['type_name']
    # 类型排序
    type_sort = request.POST['type_sort']

    # 数据库操作
    result = DemoType.objects.create(type_name=type_name,type_sort=type_sort)
    if result:
        return render(request, 'demo/demo.html', {'result':1})
    else:
        //return HttpResponse('插入失败!')
        return render(request, 'demo/demo.html', {'result':2})
  1. 使用Ajax
    1. 前端通过Ajax向后端发送请求提交数据
    2. 后端返回响应
前端收到响应后通过js对页面上显示的东西进行修改
 代码1:
 # 前端 function demo(demo_id) {     $.ajax({         url: 'url',         type: 'POST',         headers: {"X-CSRFToken":'{{ csrf_token  }}' },         data: {demo_id: demo_id},         dataType:'json',         success: function (e) {            //通过e获取后端返回的数据并对页面上的显示的东西进行修改          },     })  }   # 后端  #路由部分与上面所示的类似  #views.py  def demo(request):     //如果是get请求的话 demo_id = request.GET.get('demo_id',0)     demo_id = request.POST.get('demo_id', 0)     user_id = request.session.get('user_id', 0)     return_param = {}     try:          // 数据库操作         demo.objects.update_or_create(users_id=user_id, goods_id=goods_id, status=1)         return_param['status'] = 200         return_param['msg'] = 'success'     except Exception as e:         return_param['status'] = 500         return_param['msg'] = 'fail'     return HttpResponse(json.dumps(return_param))
 代码2:
 #前端 function demo(demo_id) {   $.ajax({       url: 'url',       type: 'POST',       headers: {"X-CSRFToken":'{{ csrf_token  }}' },       data: JSON.stringify(data),       dataType:'json',       success: function (e) {             //console.log(e)             //通过e获取后端返回的数据并对页面上的显示的东西进行修改        },   }) }   #后端  # 定义一个统用的响应类,方便规范返回给前端东西的格式 # 公共部分可以新建一个文件放在 和settings.py文件 同一个文件夹内 SUCCESS_CODE, FAIL_CODE, PARMS_CODE = 200, 400, 404  class BaseResponse:     def __init__(self, **kwargs):         self.status_code = kwargs.get('code',0)         self.message = kwargs.get('msg','')         self.data = kwargs.get('data',[])   #路由部分与上面所示的类似 # 后端的 views.py部分  def demo(request):     //如果是get请求的话 demo_id = request.GET.get('demo_id',0)     # POST 请求     params = json.loads(request.body)     demo_id = params.get('demo_id',0)     user_id = request.session.get('user_id', 0)     return_param = {}     try:          // 数据库操作         demo.objects.update_or_create(users_id=user_id, demo_id=demo_id, status=1)         return JsonResponse(BaseResponse(code= SUCCESS_CODE, msg='success',data=[]).__dict__)     except Exception as e:         return JsonResponse(BaseResponse(code=FAIL_CODE, msg='fail').__dict__)

注:如需转载请注明出处:https://www.cnblogs.com/zhuchenglin/p/10763795.html