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

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

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

原本的程序流程是：

使用Ajax后的程序流程：

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

1.修改数据的 form表单

                    {% csrf_token %}
                    
                姓名
                学号
                性别 男
                     女
                年龄
                专业
                班级
        
        

显示数据的 表格

                    {% for list in lists %}
                        
                            {% if list.sex == '1' %}
                                
                            {% else %}
                                
                            {% endif %}
                            
                    {% endfor %}
                

                    

                        
ID
                        
姓名
                        
学号
                        
性别
                        
年龄
                        
专业
                        
班级
                        
操作
                    

                            
{{ list.id }}
                            
{{ list.name }}
                            
{{ list.num }}
男
女
{{ list.age }}
                            
{{ list.zhuanye }}
                            
{{ list.clas }}
                            

                                修改
                                删除
                            
                        

 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的方式进行。