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

Django(Python)前后端交互的更多相关文章

  1. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

  2. Python 利用三个简易模块熟悉前后端交互流程

    准备工作 在学习Django之前,先动手撸一个简单的WEB框架来熟悉一下前后端交互的整体流程 本次用到的模块: 1.wsgiref,这是一个Python自带的模块,用于构建路由与视图 2.pymysq ...

  3. 微信小程序-前后端交互

    前台手机验证码登录 <view>手机号:</view> <input value="{{phone}}" bindinput="bindPh ...

  4. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

  5. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  6. 前后端交互实现(nginx,json,以及datatable的问题相关)

    1.同源问题解决 首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置 然后再终端下cmd  nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过, ...

  7. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  8. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  9. SSM-网站后台管理系统制作(4)---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  10. 【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

随机推荐

  1. L2-006 树的遍历 (25 分)

    链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805069361299456 题目: 给定一棵二叉树的后序遍历和中序 ...

  2. Asp.net Mvc 与WebForm 混合开发

      根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Web ...

  3. 软件工程---作业(one)

    (1) 回顾你过去将近3年的学习经历 1.1 有序列表项一当初你报考的时候,是真正喜欢计算机这个专业吗? 自己填写来着,对这个专业也不是特别了解:导致后续学习很差 1.2 有序列表项二你现在后悔选择了 ...

  4. 《剑指offer》和为S的两个数字

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  5. centos防火墙控制与转发端口

    一.使用防火墙 systemctl控制防火墙 systemctl status/start/stop/restart firewalld 如开启防火墙: $ systemctl start firew ...

  6. mac上安装vue项目

    mac上如何安装vue项目 一, mac系统安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H ...

  7. composer操作简单解析

    1. composer配置中国镜像 #使用命令: composer config -e#修改composer.json 添加如下代码 { "repositories": [ { & ...

  8. MyBatisPlus的通用查询,简直可以丢弃Dao和mapper.xml了

    /** * * @author shenjing * @date 2018/6/20 */ @Service public class LocalDispatchServiceImpl extends ...

  9. SpringBoot 添加mybatis generator 自动生成代码插件

    自动生成数据层代码,提高开发效率 1.pom添加插件,并指定配置文件路径 <!-- mybatis generator 自动生成代码插件 --> <plugin> <gr ...

  10. vs2017更新出错:The entire Box execution exiting with result code: 0x0

    在将vs2017 15.7.4更新至15.9.5出现“The entire Box execution exiting with result code: 0x0”错误,也就是文件解压下载开始安装后, ...