需要通過ajax實(shí)現(xiàn)局部刷新

js代碼

$('#guo-sou-ajax').click(function(){ #獲取id為guo-sou-ajax點(diǎn)擊后的信號console.log($(this).attr("data-action")) $.ajax({ #調(diào)用ajaxurl: $(this).attr("data-action"), #url保存在標(biāo)簽里面的data-action屬性里type: 'POST', #類別為POST請求data:{ #提交的數(shù)據(jù)'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){ #提交成功執(zhí)行的方法

var latest_report = JSON.parse(data); #將后端發(fā)送過來的json字符串轉(zhuǎn)換為json對象

var tr_html = '';

var url = $('#models_guo_from1').attr('action');

var csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val()
$('.guo-models-1').empty(); #刪除class為guo-models-1的字標(biāo)簽，就是刪除原先的數(shù)據(jù)

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="查看詳細(xì)信息"></center></form></div></td>'; }
$('.guo-models-1').html(tr_html); #將上面定義好的HTML插入到被刪除的區(qū)域就實(shí)現(xiàn)了局部刷新了
},
})
})

簡單來說就是通過ajax請求后端，然后將后端發(fā)送過來的數(shù)據(jù)寫入到里面

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="#">消費(fèi)列表</a></h1> </div> <div class="guo-sou-1"><button type="submit">導(dǎo)出數(shù)據(jù)</button><!--<div class="guo-sou-2"><button type="submit">導(dǎo)出數(shù)據(jù)</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>設(shè)備號</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>交易完成時(shí)間</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>支付狀態(tài)</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>設(shè)備號</center></th><th class="guo-td"><center>狀態(tài)</center></th><th class="guo-td"><center>交易類型</center></th><th class="guo-td"><center>交易金額</center></th><th class="guo-td"><center>交易完成時(shí)間</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="查看詳細(xì)信息"></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">跳轉(zhuǎn)</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))

通過這樣我們可以直接跟后臺交互數(shù)據(jù)實(shí)現(xiàn)ajax

轉(zhuǎn)載于:https://www.cnblogs.com/dayouzi/p/10183549.html

總結(jié)

以上是生活随笔為你收集整理的Django 的简单ajax的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。