django开发中从前端页面传值

摘要: 由于是刚接触到web开发方面，所以对一些开发的流程不太了解。尤其是对一些数据交互这方面问题不理解。下面整理一些关于项目中用js把前端的值传递给后端处理的例子。

由于是刚接触到web开发方面，所以对一些开发的流程不太了解。尤其是对一些数据交互这方面问题不理解。下面整理一些关于项目中用js把前端的值传递给后端处理的例子。

1、如下图，需要把下拉框里面的值和日期一起传递给后端进行处理，当点击查询的时候，会把符合要求的数据过滤出来（js传值）


前端源码如下：

<div class="content_middle">
<div class="btn-group" >
<ul class="main_box" style="position:absolute;display:block;z-index:100;">
<li class="select_box">
<span class="img btn-name">活动名称</span>
<ul class="son_ul">
{% for bbbb in activity_list %}
<li>{% if  not forloop.first %}{{ bbbb.name }}{% endif %}</li>
{% endfor %}
</ul>
</li>
</ul>
</div>
<div class="date">
<input type="text" name="" placeholder="请选择日期区间" class="choose-date"/>
</div>
<div class="date_detail" id="today">今天</div>
<div class="date_detail" id="yesterday">昨天</div>
<div class="date_detail" id="last7">最近7天</div>
<div class="date_detail" id="last30">最近30天</div>
<div>
<button class="btn btn-default normal check" style="float: right;margin-right:10px;" >查询</button>
</div>
</div>

js 源码如下：

<script>
$(function () {
$(".check").click(function () {
b = $(".choose-date").val();
c = $(".btn-name").text();
$.getJSON("ajax__data", "choose-date=" + b +"&btn-name="+c, function (data) {
$("#dongtai tr[name=homedata]").empty()
$.each(data.jsondata, function (i, b) {
$("#dongtai").append(
'<tr name="homedata">'
+ '<td>' + b.advertiser_name + '</td>'
+ '<td>' + b.create_time.slice(0,10) + '</td>'
+ '<td>' + 0 + '</td>'
+ '<td>' + 0 + '</td>'
+ '<td>' + 0 + '</td>'
+ '<td>' + b.budget + '</td>'
+ '</tr>'
)
})
})
})
})
</script>

url配置如下：

url(r'^home/ajax__data', HomePageView.ajax_a,name='a_data'),

后端代码如下：

def ajax_a(request):
homedate = request.GET.get("choose-date",'')
btnName = request.GET.get("btn-name",'')
a = homedate[:10]
b = homedate[-10:]+'/23/59/59' #对字符串进行切片处理，并拼接一个字符串
c = datetime.strptime(a, '%Y-%m-%d') #把字符串转为时间格式
d = datetime.strptime(b,'%Y-%m-%d/%H/%M/%S')
if btnName ==  '活动名称':
lennum = Activity.objects.all().filter(create_time__gte=c).filter(create_time__lte=d).values().count()
activity_list= Activity.objects.all().filter(create_time__gte=c).filter(create_time__lte=d).values()
konglist=[]
i = 0
while i < lennum:
konglist.append(activity_list[i])
i = i + 1
else:
lennum = Activity.objects.all().filter(name=btnName).filter(create_time__gte=c).filter(create_time__lte=d).values().count()
activity_list = Activity.objects.all().filter(name=btnName).filter(create_time__gte=c).filter(create_time__lte=d).values()
konglist=[]
i = 0
while i < lennum:
konglist.append(activity_list[i])
i = i + 1
context={'jsondata':konglist}
return JsonResponse(context)

（1）、首先在查询按钮这里定义了一个新的class “check“；

（2）、在js里面定义一个函数，当点击查询的时候，触发一个事件，可以得到日期和活动名称的值；

（3）、在后端用request和GET方法得到传过来的值，然后进行判断，在用djano自带的ORM来查出符合要求的数值。（备注：我这种方法是在后端直接比较的字符串“活动名称”，这种方法并不好，最好应该获得该标签内的id，来后端进行比较）；

（4）、后端处理思想如下：当如果没有选择活动名称下拉菜单中的值，而是按照默认的活动名称，那么按照时间，取出所有符合要求的值。如果选择了下拉菜单里值的话，则把过滤条件改为根据传过来的活动名称判断。最后取出来的值是{key:[{key1:value1,key2:value2,key3:value3}]}这种格式；

（5）、最后把值传递给前端，然后，用ajax进行局部刷新，然后拼接对应的字符串，既可显示符合要求的数据

2、还有一种情况如下，同样是把前端页面的值传递给后端处理（form表单传值）



前端源码如下：

<form role="form"  name="filter_form" method="get">
<div class="content_head">
<div>
<br/><br/>
<span>投放效果分析 :</span>
<br/>
<div class="key_word">
<span style="float: left;font-size: 12px;line-height: 35px">关键字：</span>
<ul class="main_box" style="position:absolute;display:block;z-index:100;margin-left:82px;">
<li class="select_box">
{% if type == '1' %}
<span class="img" style="margin-left:0;">活动编号</span>
<input type="hidden" name="type" class="type_text" value="1" />
{% else %}
<span class="img" style="margin-left:0;">活动名称</span>
<input type="hidden" name="type" class="type_text" value="0" />
{% endif %}
<ul class="son_ul">
<li value="0">活动名称</li>
<li value="1">活动编号</li>
</ul>
</li>
</ul>

   
<input type="text" name="key" class="key_text" placeholder="请输入关键字"  value="{{ key }}" style="margin-left:200px;"/>
</div>
</div>
<div>
<div class="key_word">
<span style="float: left;font-size: 12px;line-height: 35px">日期：</span>
<div class="date">
<input type="text" name="time" placeholder="请选择日期区间" class="choose-date" value="{{ timereport }}"/>
</div>

<div class="date_detail" id="today">今天</div>
<div class="date_detail" id="yesterday">昨天</div>
<div class="date_detail" id="last7">最近7天</div>
<div class="date_detail" id="last30">最近30天</div>
</div>
</div>

<div class="key_button">
<button type="submit" class="btn btn-default normal" style="float: left;margin-right:10px;" >查询</button>
<a onclick="textinput()" id="ep">{# {% url 'datainput' %} #}
<span class="blue"
style="border: 0;display: inline-block;
width: 98px;height: 35px;border-radius: 5px;
text-align: center;line-height: 35px;">导出
</span>
</a>
</div>
</div>
</form>

js代码如下：

$(function(){
$(".son_ul li").click(function(){
$(".type_text").val($(this).val())
})
})

url如下：

url(r'^report/$', ReportPageView.list_view, name='report'), # 数据报表

后端代码处理如下：

def list_view(request):
activity_list = Activity.objects.all()
type = request.GET.get("type", "")
key = request.GET.get("key","")
timereport = request.GET.get("time","")
'''对下拉框里的值和关键字以及日期进行判断，并取出相应的值'''
if timereport != '':
a = timereport[:10]
b = timereport[-10:]+'/23/59/59'
c = datetime.strptime(a, '%Y-%m-%d')
d = datetime.strptime(b,'%Y-%m-%d/%H/%M/%S')
if type == '0':
if key != '':
activity_list=Activity.objects.filter(start_date__gte=c).filter(start_date__lte=d).filter(name__contains=key)
else:
activity_list=Activity.objects.filter(start_date__gte=c).filter(start_date__lte=d)

else:
if key != '':
activity_list = Activity.objects.filter(start_date__gte=c).filter(start_date__lte=d).filter(id__contains=key)
else:
activity_list = Activity.objects.filter(start_date__gte=c).filter(start_date__lte=d)

'''对取出来的数据进行格式化，把数据按照想要的格式取出来'''
activity_order_list=[]  #初始化包含有订单的活动数组
for i in activity_list:
orderlist = Order.objects.filter(activity__id__contains=i.id)
order_list = []     #初始化活动内部的订单数组
for o in orderlist:
if Report.objects.filter(order_id=o.id).count()>0:
order_list.append({'order':o,'report':Report.objects.filter(order_id=o.id)[0],'celebritynum':OrderCelebrityShip.objects.filter(order_id=o.id).count(),'starnum':OrderStarShip.objects.filter(order_id=o.id).count()})
else :
order_list.append({'order':o,'report':'','celebritynum':OrderCelebrityShip.objects.filter(order_id=o.id).count(),'starnum':OrderStarShip.objects.filter(order_id=o.id).count()})
activity_order_list.append({'object':i,'list':order_list})   #组成包含有订单的 活动 数组

content = {
'active_menu': '数据报表',
'sum_data':activity_order_list,
'type':type,
'key':key,
'timereport':timereport,
}
return render(request,'report/data_report.html',content)

由于这次是用到form表单传值，没有用到ajax刷新，所以当点击查询的时候，会刷新一次这个页面。后端处理主要是取出合适的数据模型，然后传给前端页面进行展示处理。

3、这一种方法是在第一种方法上做的更改，就是js传的值是标签里的value值。如下图：



前端源码如下：

<div id="page-a">
<b>退款记录</b>
<div class="time">
<div class="date">
<input type="text" name="" placeholder="请选择日期区间" class="choose-date select-date"/>
</div>
</div>
<div>
操作类型:
<ul class="main_box" style="position:absolute;display:block;z-index:100;margin: -18px 0 0 285px;">
<li class="select_box">
<span class="img ">请选择操作类型</span>
<ul class="son_ul" id="task-son-ul" name="states">
<li value="0">转账汇款</li>
<li value="1">支付宝</li>
</ul>
</li>
</ul>
<button class="blue blucwlookbtn chaxun" style="float:left;position: absolute;left: 630px;">查询</button>
<button id="turn-refund" class="blue" style="float:right;">申请退款</button>
</div>
<table style="width:100%; margin:30px 0;" id="context-refund">
<th>日期</th>
<th>退款金额</th>
<th>退款方式</th>
<th>状态</th>
{% for f in context.refund_data %}
<tr>
<td>{{ f.time |date:'Y-m-d'}}</td>
<td>{{ f.amount }}</td>
<td>{{ f.get_type_display }}</td>
<td>{{ f.info }}</td>
</tr>
{% endfor %}
</table>
</div>

js代码如下：

var dataText=""
$("#task-son-ul li").click(function(){
dataText=$(this).val()
})

$(".chaxun").click(function () {
if (dataText==null || dataText==""){
dataText=0
}
b = $(".select-date").val();
$.getJSON("ajax__chaxun", "chaxun-date=" + b +"&caozuo="+dataText, function (data) {

$.each(data.refund_data, function (i, a) {
var yang="";
if (a.type=='A'){
yang="转账汇款"
}else{
yang="支付宝"
}
$("#context-refund tr[name=refund-name]").empty()
$("#context-refund").append(
'<tr name="refund-name">'
+ '<td>' + a.time.slice(0,10) + '</td>'
+ '<td>' + a.amount + '</td>'
+ '<td>' + yang+ '</td>'
+ '<td>' + '测试' + '</td>'
+'</tr>'
)
})
})
})

url如下：

url(r'^finance/ajax__chaxun', FinancePageView.ajax_chaxun, name='c_data'),

后端代码如下：

def ajax_chaxun(request):
query_date= request.GET.get('chaxun-date','')
operate=request.GET.get('caozuo','')
a = query_date[:10]
b = query_date[-10:]+'/23/59/59'
c = datetime.strptime(a, '%Y-%m-%d')
d = datetime.strptime(b,'%Y-%m-%d/%H/%M/%S')
if operate=='0':
refund_data=Refund.objects.filter(type='A').filter(time__gte=c).filter(time__lte=d)
else:
refund_data=Refund.objects.filter(type='B').filter(time__gte=c).filter(time__lte=d)
testdata=[model_to_dict(i) for i in refund_data]
context={'refund_data':testdata}
return JsonResponse(context)

本次后端处理方法，是用的django自带的model_to_dict方法，让他转变为字典类型。最后在转成{key:[{key1:value1,key2:value2,key3:value3}]}类型

而此次的js传值，是把标签里的value值（<li value="0">）取出来，然后传递给后端进行判断，这样如果以后更改标签内容的话，不影响后端代码 。