Django中ajax的增删改查访问

最新推荐文章于 2022-12-06 16:02:12 发布

luqin_

最新推荐文章于 2022-12-06 16:02:12 发布

阅读量2k

点赞数

分类专栏：总结文章标签： Django ajax

本文链接：https://blog.csdn.net/Lq_520/article/details/81393908

版权

总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文介绍了如何在Django项目中利用AJAX进行增、删、改、查操作。首先建立Django模型，然后通过AJAX获取并渲染页面。内容包括：展示所有学生信息的按钮、添加学生信息的按钮。删除操作需要传递被删除数据的ID，更新和添加同样需要对应的数据输入，而添加数据则不需要指定ID。

摘要由CSDN通过智能技术生成

Django中ajax的增删改查访问

这里在Django中我们建好模型，通过ajax取渲染页面。

这里给到一个页面show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示所有学生信息</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>
{#  forbidden 错误处理#}
{% csrf_token %}
<input id="showStu" value="获取所有学生信息" type="button">
#添加学生
<input id="addStu" value="添加学生信息" type="button" onclick="add_Stu()">

#展示所有学生信息
<div id="div_stus"></div>
#更新学生数据
<div id="div_update_stus"></div>
#删除学生数据
<div id="div_add_stus"></div>
</body>
</html>

页面中有一个获取所有学生信息按钮，一个添加学生信息按钮，前面我们展示了所有的学生信息，这里我们用前端给他进行渲染。

后台那边代码为：

def showStu(request):
    if request.method == 'GET':
        data= Student.objects.all()
        result ={
            'result':data
        }
        return render(request,'show.html',result)

我们将js写在header标签中

$(function () {
    $('#showStu').click(function () {
    #访问/stu/student/  返回所有学生信息
        $.get('/stu/showStu/', function (msg) {
        #给显示的页面加上简单的样式
            s = '<table><tr><td>ID</td><td>姓名</td><td>地址</td><td>操作</td></tr>';
            for (var i = 0; i < msg.length; i += 1) {
                s += '<tr><td>' + msg[i].id + '</td>\
                       <td>' + msg[i].s_name + '</td>\
                       <td>' + msg[i].s_tel + '</td><td>\
                       #进行当前数据的修改
                       <a href="javascript:;" onclick ="update_stu('+ msg[i].id + ')">编辑</a> |\
                       #进行当前数据的删除
                       <a href="javascript:;" onclick="del_stu('+ msg[i].id + ')">删除</a></td></tr>'

            }
            s += '</table>';
            $('#div_stus').html(s)
        }, 'json');
    });
});

删除,当删除时，需要传入你需要删除数据的ID，才能确定你删除的是那一条数据。

function  del_stu(i) {
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            $.ajax({
                url:'/stu/showStu/' + i + '/',
                type:'DELETE',
                headers :{'X-CSRFToken':csrf},
                dataType:'json',
                success:function () {
                    alert('删除成功')
                },
                error:function () {
                    alert('删除失败')

                }
            });
        }

方式为delete,显示删除成功，代表成功地删除了数据。

更新，与删除一致，需要传入ID，才能确定你需要传入的是那一条数据。而在添加数据时，也要有相应的输入页面。这里输入页面代码如下：

function update_stu(i) {
            s='姓名：<input type ="text" id ="s_name" name = "name">\
            电话：<input type ="text" id ="s_tel" name = "tel">\
            <input type ="button" value="提交" onclick="update(' + i +')">';
            #将编辑信息页面样式进行保存
            $('#div_update_stus').html(s)

        }

更新的ajax如下所示：

 function  update(i) {
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            s_name = $('#s_name').val();
            s_tel = $('#s_tel').val();
            $.ajax({
                url:'/stu/showStu/' + i + '/',
                type:'PATCH',
                {#headers :{'X-CSRFToken':csrf},#}
                dataType:'json',
                data:{'s_name':s_name,'s_tel':'s_tel'},
                success:function (msg) {
                    alert('修改成功')
                },
                error:function (msg) {
                    alert('修改失败')

                }
            });

        }

更新部分信息用PATCH，这里我们获取到前面编辑页面所输入的信息s_name，s_tel的值，将其传入后端的student路径，即StudentsEdit方法。让数据进行更新，再点击获取所有学生信息，就会看到相对应ID的学生信息有所改变。

添加数据。与更新一样，需要添加数据的页面。因为是创造数据,所以不用传入任何ID。

  function add_Stu() {
           s='姓名：<input type ="text" id ="s_name" name = "name">\
            电话：<input type ="text" id ="s_tel" name = "tel">\
            <input type ="button" value="提交" onclick="add()">';
            $('#div_add_stus').html(s)

        }

添加的ajax如下所示：

 function add() {
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            s_name = $('#s_name').val();
            s_tel = $('#s_tel').val();
            $.ajax({
                url:'/stu/showStu/',
                type:'POST',
                {#headers :{'X-CSRFToken':csrf},#}
                dataType:'json',
                data:{'s_name':s_name,'s_tel':'s_tel'},
                success:function (msg) {
                    alert('添加成功')
                },
                error:function (msg) {
                    alert('添加失败')

                }
            });
        }