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

注：如需轉載請註明出處：http://www.javashuo.com/article/p-tjjnlbwy-ke.html