由于是刚接触到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 οnclick="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">)取出来,然后传递给后端进行判断,这样如果以后更改标签内容的话,不影响后端代码 。