Django实战笔记(4) Django和Ajax、json的数据交互

最近使用Django和Ajax进行数据交互的时候出现的各种问题

个人理解的Ajax，是把原本直接提交到后台的数据、表单等提交到js代码中。

原本的程序流程是：

使用Ajax后的程序流程：

如上图，使用Ajax后，Ajax把前台和后台隔离开来，相当于一个中间平台，负责向后台传输数据以及从后台读取数据，并对页面结构进行控制。

1.修改数据的 form表单

<form class="form-horizontal" id="form1">
                    {% csrf_token %}
                    <input type="text" hidden value="" name="id">
                姓名<input type="text" class="form-control" name="name" id="name"   placeholder="姓名">
                学号<input type="text" class="form-control" name="num" id="num" placeholder="学号" readonly>
                性别<input type="radio" name="sex" value="1" checked> 男
                    <input type="radio" name="sex" value="0"> 女
                年龄<input type="text" class="form-control" name="age" id="age" placeholder="年龄">
                专业<input type="text" class="form-control" name="zhuanye" id="zhuanye" placeholder="专业">
                班级<input type="text" class="form-control" name="clas" id="clas" placeholder="班级">
        <input type="button" onclick="baocun()" id="bc" class="btn btn-default" value="保存">
        <input type="button" onclick="fanhui()" id="bc" class="btn btn-default" value="返回">

</form>

显示数据的 表格

<table class="table table-hover">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>专业</th>
                        <th>班级</th>
                        <th>操作</th>
                    </tr>
                    {% for list in lists %}
                        <tr id="tr{{ list.num }}">
                            <td>{{ list.id }}</td>
                            <td>{{ list.name }}</td>
                            <td>{{ list.num }}</td>
                            {% if list.sex == '1' %}
                                <td>男</td>
                            {% else %}
                                <td>女</td>
                            {% endif %}
                            <td>{{ list.age }}</td>
                            <td>{{ list.zhuanye }}</td>
                            <td>{{ list.clas }}</td>
                            <td>
                                <a id="a1" href="javascript:" onclick="xiugai({{ list.num }})"
                                   class="btn btn-info">修改</a>
                                <a href="javascript:" onclick="del({{ list.id }})" class="btn btn-danger">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                </table>

 2.修改按钮的js代码

function xiugai(num) {
            tab = document.getElementById('tab')
            xiugai = document.getElementById('xiugai')
            
            tab.style.display = 'none' {#将表格隐藏，将修改的from表单显示出来#}
            xiugai.removeAttribute('style')

            $.post('/student_manage/xiugai/', {'num': num}, {#Ajax的post请求修改方法，并将学号传过去#}
{#请求后的回调函数，后台将数据返回到con中,将数据赋值给各个标签的value#}
                function (con) {  

                    document.getElementsByName('name')[0].value = con.name
                    document.getElementsByName('num')[0].value = num
                    if (con.sex === 0) {
                        document.getElementsByName('sex')[0].removeAttribute('checked')
                        document.getElementsByName('sex')[1].setAttribute('checked')
                    }
                    document.getElementsByName('age')[0].value = con.age
                    document.getElementsByName('zhuanye')[0].value = con.zhuanye
                    document.getElementsByName('clas')[0].value = con.clas
                }
            )
        }

保存按钮的js代码

function baocun() {
            tab = document.getElementById('tab')
            xiugai = document.getElementById('xiugai')
            xiugai.style.display = 'none'
            tab.removeAttribute('style')

            $.ajax({
                cache: false,
                type: "POST",
                url: "/student_manage/update/",
                {#data: {'name': name, 'age': age, 'zhuanye': zhuanye,'clas':clas,'num':num},#}
                {##表单中的数据#}
                data: $('#form1').serialize(),
                dateType: "json",
                async: false,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    #回调函数（提交完form表单后），将修改后的数据更新到页面
                    var num = $("#num").val()
                    obj = document.getElementById('tr' + num)
                    obj.getElementsByTagName('td')[1].innerHTML = $("#name").val()
                    obj.getElementsByTagName('td')[4].innerHTML = $("#age").val()
                    obj.getElementsByTagName('td')[5].innerHTML = $("#zhuanye").val()
                    obj.getElementsByTagName('td')[6].innerHTML = $("#clas").val()
                    {#alert(obj)#}
                    if (data.status == 'success') {
                        alert("学号" + num + "修改成功");

                        {#window.location.reload();//刷新当前页面.#}
                    }
                },
            });
        }

3.后台代码

修改js的后台代码

def xiugai(request):
    num = request.POST.get('num')
    obj = Student.objects.get(num=num)
    name = obj.name
    sex = obj.sex
    age = obj.age
    zhuanye = obj.zhuanye
    clas = obj.clas

    con = {
        "name": name,
        "sex": sex,
        "age": age,
        "zhuanye": zhuanye,
        "clas": clas,
    }
    return HttpResponse(json.dumps(con), content_type='application/json')
#需引入json模块，dumps将字典格式化为json格式，返回给js代码中的回调函数

 保存js的后台代码

# 执行跟新操作
def update(request):
#将前台Ajax提交的表单数据更新到数据库
    num = request.POST.get('num')
    name = request.POST.get('name')
    # sex = request.POST.get("sex")
    age = request.POST.get('age')
    zhuanye = request.POST.get('zhuanye')
    clas = request.POST.get('clas')
    Student.objects.filter(num=num).update(name=name, age=age, zhuanye=zhuanye, clas=clas)
    con = {
        'status': 'success'
    }
    return HttpResponse(json.dumps(con), content_type='application/json')

总结：

采用ajax需要注意的是：
1. form表单中省去active和method，都在ajax中书写；
2. 提交按钮出的，要将submit改为button， 因为我们表单中书写的内容并不通过表单提交，而是通过ajax提交；
3. 前后端数据交换通过json的方式进行。