需要通過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
)
)
