Django前后端数据交互

版本声明:本文为同程IT运维团队原创,未经允许不得转载

开发环境

本文使用:
– IDE:PyCharm
– Django version==1.10
– Python version==3.5.0

WEB前后端交互方式

做web开发,很重要的一个环节就是前后端数据的传递和交互。

通过FORM方式传递参数到后端

和其他WEB语言实现类似,前端代码如下图:
image
在标签中,需要用method设置传入数据的方式,一般有“get”,“post”等,采用restful设计风格,后端方法也需要设置和前端method设置的传入数据的方式一致。其次在标签中还需要规定调用的后端方法名称。在django中,这个方法名需要在 urls中设置好,在urls设置如下:

url(r'^userlogin/$',management_views.userlogin,name='userlogin'),

在后端userlogin方法,实现如下:
#登录方法

def userlogin(request):
    post = request.POST
    username = post.get("username")
    password = post.get("password")
    ...
    ...
    ...

    return render_to_response("common/login.html", {"Message": True})#返回用户名密码错误
    ....

通过request,获得前端传入的参数,再采用render_to_response传回到前端

通过JS把数据传入到后端方法

在Django中,采用url的方式把数据传入到后端,实现方式如下:

$(document).ready(function() {
    $('.pagination').jqPagination({
        link_string : '/?page={page_number}',
        max_page    : {{ allPage }},
        paged       : function(page) {
            var onepage = $('#onepage').val();
            $.ajax({
                url: {% url "relation1" %},#在这段不能使用/manager/relation1,只能用“relation1”,且在urls中设置好
                type: 'GET',#设置前端传入到后端的方式
                dataType: 'json',
                data: {'curPage': page,'onepage':onepage},
                success:function (data) {#data指后端传入前端的数据,data的内容由后端方法返回
                    var tbody = "";
                    if(data!=""){
                        $("#temptable tr:gt(0)").remove();
                        for(var i=0;i<data.length;i++){
                            var trs="";
                            trs ="<tr><td style='display:none'>"+data[i][0]+"</td><td>"+data[i][1]+"</td><td>"+data[i][2]+"</td><td><button data-toggle='modal'  data-target='#modifyrelation' onclick='showmodifyrelationinfo("+data[i][0]+")'class='btn red btn-outline'>编辑</button><button class='btn red btn-outline' onclick='deletrelation("+data[i][0]+")'>删除</button></td></tr>";
                            tbody+=trs;
                        }
                        $("#temptable").append(tbody);
                    }
                }
            })
        }
    });
});

还有一种简单的前端数据传入到后端的JS实现方法,如下:

function search(){
    var search =$('#searchcontent').val();
    location.href="/searchrelation/?search="+search;#后端用get的方式,获得search的数据
}
#实现敲击回车进行搜索的方法
$(function () {
    $("#searchcontent").keydown(function (e) {
        if (e.keyCode == 13) {
           search();
        }
    });
});

通过后端方法把数据传到前端JS

这里讲述两种方法:

  1. 页面加载完成后,在页面上操作,在页面上通过 ajax
    方法得到新的数据(再向服务器发送一次请求)并显示在网页上,这种情况适用于页面不刷新的情况下,动态加载一些内容。比如用户输入一个值或者点击某个地方,动态地把相应内容显示在网页上。
    实现代码,参考上面“用url的方式把数据传入到后端”的代码。

  2. 直接在视图函数(views.py中的函数)中渲染一个 list 或 dict 的内容,和网页其它部分一起显示到网页上(一次性地渲染,还是同一次请求)。

views.py(views.py中返回的函数中的值要用 json.dumps()处理)

import json
  from django.shortcuts import render
   
  def home(request):
      List = ['同程IT', '渲染Json到模板']
      Dict = {'site': '同程IT', 'author': 'IT运维'}
      return render(request, 'home.html', {
              'List': json.dumps(List),
              'Dict': json.dumps(Dict)
          })
  

home.html 中的一部分

//列表
  var List = {{ List }};
  //字典
  var Dict = {{ Dict }};