需要通过ajax实现局部刷新
js代码
$('#guo-sou-ajax').click(function(){ #获取id为guo-sou-ajax点击后的信号console.log($(this).attr("data-action")) $.ajax({ #调用ajaxurl: $(this).attr("data-action"), #url保存在标签里面的data-action属性里type: 'POST', #类别为POST请求data:{ #提交的数据'number':$('#number_guo_ajax').val(),'Devicenumber':$('#Devicenumber_guo_ajax').val(),'starttime':$('#starttime_guo_ajax').val(),'endtime':$('#endtime_guo_ajax').val(),'State':$('#State_guo_ajax').val(),'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val() #这是django的csrf_token
},
success:function(data){ #提交成功执行的方法
var latest_report = JSON.parse(data); #将后端发送过来的json字符串转换为json对象
var tr_html = '';
var url = $('#models_guo_from1').attr('action');
var csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val()
$('.guo-models-1').empty(); #删除class为guo-models-1的字标签，就是删除原先的数据
for (var i = 0; i < latest_report.subclass.length; i++) {
report_info = latest_report.subclass[i];
tr_html += '<td class="guo-td-1"><center>' + report_info.id + '</center></td><td class="guo-td-2"><center>' + report_info.number + '</center></td><td class="guo-td"><center>' + report_info.name + '</center></td><td class="guo-td"><center>' + report_info.DeviceID + '</center></td><td class="guo-td"><center>' + report_info.State + '</center></td><td class="guo-td"><center>' + report_info.Type + '</center></td><td class="guo-td"><center>' + report_info.Money + '元</center></td><td class="guo-td"><center>' + report_info.endtime + '</center></td>' + '<td class="guo-td"><div><form method="post" action='+ url +'><input type="hidden" name="csrfmiddlewaretoken" value='+ csrfmiddlewaretoken +'><input type="hidden" name="id" value='+ report_info.id +'><center><input type="submit" value="查看详细信息"></center></form></div></td>'; }
$('.guo-models-1').html(tr_html); #将上面定义好的HTML插入到被删除的区域就实现了局部刷新了
},
})
}) 简单来说就是通过ajax请求后端，然后将后端发送过来的数据写入到里面
html代码
{% extends 'xproject/base.html' %} {% load i18n static %} {% block title %} subclass details {% endblock %} {% block tag %}交易管理{% endblock %} {% block content %} <div class="guo-subclass"><h1><a href="#">消费列表</a></h1> </div> <div class="guo-sou-1"><button type="submit">导出数据</button><!--<div class="guo-sou-2"><button type="submit">导出数据</button></div>--><div class="guo-sou-3"><form method="post" action="{% url 'xproject:transaction'%}">{% csrf_token %}<label>流水号</label><input type="text" name="number" value="" class="guo-input-1" id="number_guo_ajax"><label>设备号</label><input type="text" name="Devicenumber" value="" class="guo-input-1" id="Devicenumber_guo_ajax"><!--<label>支付订单号：</label>--><!--<input type="text" name="POnumber" value="" class="guo-input-1">--><label>交易完成时间</label><input type="date" name="starttime" value="" class="guo-input-2" id="starttime_guo_ajax"><input type="date" name="endtime" value="" class="guo-input-2" id="endtime_guo_ajax"><label>支付状态</label><select name="State" class="guo-select-1" id="State_guo_ajax"><option value="">-----</option><option value="to poy">to poy</option><option value="To be paid">To be paid</option><option value="Refund">Refund</option></select><button type="button" id="guo-sou-ajax" data-action="{% url 'xproject:transaction_ajax'%}">搜索</button></form></div> </div> <div class="guo-list"><table class="guo-table-1"><tr><th class="guo-td"><center>序号</center></th><th class="guo-td"><center>流水号</center></th><th class="guo-td"><center>用户昵称</center></th><th class="guo-td"><center>设备号</center></th><th class="guo-td"><center>状态</center></th><th class="guo-td"><center>交易类型</center></th><th class="guo-td"><center>交易金额</center></th><th class="guo-td"><center>交易完成时间</center></th><th class="guo-td"><center>操作</center></th></tr>{% for subclass in subclass_s %}<tr class="guo-models-1"><td class="guo-td-1"><center>{{ subclass.id }}</center></td><td class="guo-td-2" ><center>{{ subclass.number }}</center></td><td class="guo-td" ><center>{{ subclass.normalUser.username }}</center></td><td class="guo-td"><center>{{ subclass.deviceInfo.DeviceID }}</center></td><td class="guo-td"><center>{{ subclass.State }}</center></td><td class="guo-td"><center>{{ subclass.Type }}</center></td><td class="guo-td"><center>{{ subclass.Money }}元</center></td><td class="guo-td"><center>{{ subclass.endtime|date:'Y-m-d H:i'}}</center></td><td class="guo-td"><div><form method="post" action="{% url 'xproject:all'%}" id="models_guo_from1">{% csrf_token %}<input type="hidden" name="id" value="{{ subclass.id }}"><center><input type="submit" value="查看详细信息"></center></form></div></td></tr>{% endfor %}</table><div class="pagination"><span class="step-links_s">{% if subclass_s.has_previous %}<button type="submit"><a href="?page=1">首页</a></button>{% else %}<button type="button"><a style="color:gray;" href="#">首页</a></button>{% endif %}</span><span class="step-links_s">{% if subclass_s.has_previous %}<button type="submit"><a href="?page={{ subclass_s.previous_page_number }}">上一页</a></button>{% else %}<button type="button"><a style="color:gray;" href="#">上一页</a></button>{% endif %}<span class="step-links_s">Page {{ subclass_s.number }} of {{ subclass_s.paginator.num_pages }}</span>{% if subclass_s.has_next %}<button type="submit" id="guo-page-report"><a href="?page={{ subclass_s.next_page_number }}">下一页</a></button>{% else %}<button type="button"><a style="color:gray;" href="#">下一页</a></button>{% endif %}</span><span class="step-links_s">{% if subclass_s.has_next %}<button type="submit"><a href="?page={{ subclass_s.paginator.num_pages }}">末页</a></button>{% else %}<button type="button"><a style="color:gray;" href="#">末页</a></button>{% endif %}</span><form method="get" action="{% url 'xproject:transaction' %}" class="guo-form-page"><input class="guo-page-input-1" name="page" type="text" ><button type="submit">跳转</button></form></div></div>{% endblock %}
Django的views处理
@login_required def transaction_ajax(request):if request.method == 'POST':number = request.POST.get('number')Devicenumber = request.POST.get('Devicenumber')starttime = request.POST.get("starttime")endtime = request.POST.get("endtime")State = request.POST.get("State")subclass_s = models.subclass_details.objects.all()if starttime != '' and subclass_s != '' or endtime != '' and subclass_s != '':start_date = datetime.date(2005, 1, 1)end_date = datetime.date(2099, 12, 29)if starttime != '':list = starttime.split('-')start_date = datetime.date(int(list[0]), int(list[1]), int(list[2]))if endtime != '':list1 = endtime.split('-')end_date = datetime.date(int(list1[0]), int(list1[1]), int(list1[2]))subclass_s = subclass_s.filter(endtime__range=(start_date, end_date))if number != '' and subclass_s != '':try:subclass_s = subclass_s.filter(number=number)except:subclass_s =subclass_sif Devicenumber != '' and subclass_s != '':try:subclass_s = subclass_s.filter(Devicenumber=Devicenumber)except:subclass_s = subclass_sif starttime != '' and subclass_s != '':try:subclass_s = subclass_s.filter()except:subclass_s = subclass_sif State != '' and subclass_s != '':try:subclass_s = subclass_s.filter(State=State)except:subclass_s = subclass_slist = []for subclass in subclass_s:date = {'id':subclass.id,'number': subclass.number,'name':subclass.normalUser.username,'DeviceID':subclass.deviceInfo.DeviceID,'State':subclass.State,'Type':subclass.Type,'Money':str(subclass.Money),'endtime':timezone.localtime(value=subclass.endtime).strftime("%Y-%m-%d %H:%M")}list.append(date)jsonz = {"subclass":list}print(jsonz)return HttpResponse(json.dumps(jsonz))
通过这样我们可以直接跟后台交互数据实现ajax
)
)
