Django前后端交互

使用Django中自带的模板

前端通过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>

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

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

使用Ajax

前端通过Ajax向后端发送请求提交数据
后端返回响应
前端收到响应后通过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

猜你喜欢