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