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>     

   2. 后端通过渲染函数传递数据给模板文件并渲染

      # /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})
      

2. 使用Ajax
   1. 前端通过Ajax向后端发送请求提交数据
   2. 后端返回响应

   3. 前端收到响应后通过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

转载于:https://www.cnblogs.com/zhuchenglin/p/10763795.html