版本声明:本文为同程IT运维团队原创,未经允许不得转载
开发环境
本文使用:
– IDE:PyCharm
– Django version==1.10
– Python version==3.5.0
WEB前后端交互方式
做web开发,很重要的一个环节就是前后端数据的传递和交互。
通过FORM方式传递参数到后端
和其他WEB语言实现类似,前端代码如下图:
在标签中,需要用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
这里讲述两种方法:
- 页面加载完成后,在页面上操作,在页面上通过 ajax
方法得到新的数据(再向服务器发送一次请求)并显示在网页上,这种情况适用于页面不刷新的情况下,动态加载一些内容。比如用户输入一个值或者点击某个地方,动态地把相应内容显示在网页上。
实现代码,参考上面“用url的方式把数据传入到后端”的代码。 -
直接在视图函数(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 }};