modal编辑ajax

前端

{% extends 'layout.html' %}
{% load static %}
{% block content %}
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading clearfix">
            <span class="pull-left">用户列表</span>
            <form class="form-inline pull-right" method="get">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字" name="keywords" value="{{ keywords }}">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
        <!-- Table -->
        <table class="table table-bordered table-hover">
            <tr>
                <th>id</th>
                <th>会员号</th>
                <th>会员名</th>
                <th>union_id</th>
                <th>open_id</th>
                <th>会员注册渠道</th>
                <th>是否会员</th>
                <th>会员有效期</th>
                <th>操作</th>
            </tr>
            {% for one in pager.query_set %}
                <tr>
                    <td>{{ one.id }}</td>
                    <td>{{ one.member_id }}</td>
                    <td>{{ one.member_name }}</td>
                    <td>{{ one.union_id }}</td>
                    <td>{{ one.open_id }}</td>
                    <td>{{ one.channel }}</td>
                    <td>{{ one.get_sheep_member_flag_display }}</td>
                    <td>{{ one.valid_time_end|date:"Y-m-d H:i:s" }}</td>
                    <td>
                        <a class="btn btn-default btn-xs" target="_blank"
                           href="https://wx.qa.17u.cn/woolmarket/sheepIndex?channel=MINA-WM&oid={{ one.open_id }}&uid={{ one.union_id }}&nick=test111&avatar=https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqzZCn4vRLEl84K1qx9Uicp3lKbhanEGfhbwHNPqsHUria9ZQ6zv6C1qeGHbKhx5eNHyjzON3XRXpOQ/132">穿越</a>
                        <button class="btn btn-success btn-xs editBtn" edit_id= {{ one.id }}>编辑</button>
                        <a class="btn btn-info btn-xs" href="/member/{{ item.member_id }}/relation?status=1">待生效的卡</a>
                        <a class="btn btn-success btn-xs"
                           href="/member/{{ item.member_id }}/relation?status=2">生效中的卡</a>
                        <a class="btn btn-xs btn-warning"
                           href="/member/{{ item.member_id }}/relation?status=3">已失效的卡</a>
                        <a class="btn btn-danger btn-xs"
                           href="/member/{{ item.member_id }}/relation?status=4">已作废的卡</a>
                        <a class="btn btn-default btn-xs"
                           href="/member/{{ item.member_id }}/othervideo/">额外购视频卡</a>
                    </td>

                </tr>
            {% endfor %}
        </table>
    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {{ pager.html }}
        </ul>
    </nav>
    {% include 'addModal.html' %}
{% endblock %}
{% block js %}
    <script>
        $(function () {
            $("#id_valid_time_end").datetimepicker({
                format: 'Y-m-d H:i:s',
            });
        });
    </script>
    <script>
        let editURL = "{% url 'info_edit' %}"
        let INFO_ID;

    </script>
    <script src="{% static 'js/addModal.js' %}"></script>
{% endblock %}

modal

<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" novalidate method="post" id="addForm">
                    {% csrf_token %}
                    {% for foo in form %}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">{{ foo.label }}</label>
                            <div class="col-sm-10" style="position: relative; margin-bottom: 10px">
                                {{ foo }}
                                <span class="error_msg" style="position: absolute;color: red"></span>
                                <span id="helpBlock_{{ foo.name }}" class="help-block">{{ foo.help_text }}</span>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="submitBtn">Save changes</button>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

modal的js

$(function () {
    addOrEditSubmitEvent();
    openAddOrEditModal();
})

function addOrEditSubmitEvent() {
    $("#submitBtn").click(function () {
        $(".error_msg").empty()
        $.ajax({
            url: editURL + '?pk=' + INFO_ID,
            data: $("#addForm").serialize(),
            type: 'POST',
            dataType: 'JSON',
            success: function (res) {
                if (res.success) {
                    $("#addModal").modal('hide')
                    location.reload()
                } else {
                    $.each(res.detail, function (k, v) {
                        $("#id_" + k).next().text(v)
                    })
                }
            }
        })
    })
}

function openAddOrEditModal() {
    $("#addBtn").click(function () {
        $("#addModal").modal('show')
    })
    $(".editBtn").click(function () {
        $(".error_msg").empty()
        INFO_ID = $(this).attr("edit_id")
        $.ajax({
            url: editURL,
            data: {pk: INFO_ID},
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                if (res.success) {
                    $.each(res.detail, function (k, v) {
                        $("#id_" + k).val(v)
                    })
                } else {
                    alert('数据错误')
                }
            }
        })
        $("#addModal").modal('show')
    })
}

后端逻辑

def info_list(request):
    if request.method == 'GET':
        form = InfoForm()
        keywords = request.GET.get('keywords')
        con = Q()
        if keywords:
            keywords = keywords.strip()
            con.connector = 'OR'
            con.children.append(('member_id__contains', keywords))
        else:
            keywords = ''
        queryset = models.MemberInfo.objects.filter(con).order_by('-sheep_member_flag')
        pager = Pagination(request, queryset)
        return render(request, 'info.html', locals())


def info_edit(request):
    json_res = ResCode()
    if request.method == 'GET':
        pk = request.GET.get('pk')
        info = models.MemberInfo.objects.filter(pk=pk).first()
        json_res.success = True
        info_dict = {
            'id': info.id,
            'sheep_member_flag': info.sheep_member_flag,
            'valid_time_end': info.valid_time_end,
        }
        json_res.detail = info_dict
        return JsonResponse(json_res.dict)
    if request.method == 'POST':
        info = models.MemberInfo.objects.filter(pk=request.GET.get('pk')).first()
        form = InfoForm(data=request.POST, instance=info)
        if not form.is_valid():
            json_res.success = False
            json_res.detail = form.errors
            return JsonResponse(json_res.dict)
        form.save()
        json_res.success = True
        return JsonResponse(json_res.dict)