Django 的简单ajax
需要通过ajax实现局部刷新
js代码
$('#guo-sou-ajax').click(function(){ #获取id为guo-sou-ajax点击后的信号
console.log($(this).attr("data-action"))
$.ajax({ #调用ajax
url: $(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 += '' + report_info.id + ' ' + report_info.number + ' ' + report_info.name + ' ' + report_info.DeviceID + ' ' + report_info.State + ' ' + report_info.Type + ' ' + report_info.Money + '元 ' + report_info.endtime + '
$('.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-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="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 poyoption> <option value="To be paid">To be paidoption> <option value="Refund">Refundoption> 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_s if Devicenumber != '' and subclass_s != '': try: subclass_s = subclass_s.filter(Devicenumber=Devicenumber) except: subclass_s = subclass_s if starttime != '' and subclass_s != '': try: subclass_s = subclass_s.filter() except: subclass_s = subclass_s if State != '' and subclass_s != '': try: subclass_s = subclass_s.filter(State=State) except: subclass_s = subclass_s list = [] 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