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

女爷i 2022-05-12 07:00 79阅读 0赞

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

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

原本的程序流程是：

![70][]

使用Ajax后的程序流程：

![70 1][]

如上图，使用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代码

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

[70]: /images/20220512/64aa9efed4bc447598479089b177ae20.png
[70 1]: /images/20220512/5c6305bd54734f4885ed6057e02822c5.png