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 += '<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_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