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